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;
}