React 学习——行内样式、外部样式、动态样式
三种样式的写法
import "./index.css"; //同级目录下的样式文件
function App() {
const styleCol = {
color: 'green',
fontSize: '40px'
}
// 动态样式
const isBlock = false;
return (
<div className="App">
{/* 行内样式 */}
<span style={{color:'red',fontSize:'25px'}}>this is span</span>
<p style={styleCol}>this is p</p>
{/* 外部样式 */}
<div className="foo">this is div</div>
{/* 动态样式 */}
<span style={{display:isBlock?'block':'none'}}>isBlock动态显示</span>
</div>
);
}
export default App;index.css文件内容
.foo{
color: pink;
font-size: 35px;
}原文地址：https://blog.csdn.net/qq_40269801/article/details/140637549
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！