学习React第五天

   React的样式  class 和 style

class类名设置

1.必须写为className
2.类名和样式写在css文件里
3.必须接受一个字符串

 style内联

1.不能像原生一样写成字符串，必须写成对象

import React from "react";
//引入 App.css
import "./App.css"
class App extends React.PureComponent {
  render() {
    return (
      <div className="App">
         也可以使用原生的class写法 样式可以修改成功,但是报错  
         Warning: Invalid DOM property `class`. Did you mean `className`?Name`?
        <p className="title">学习React 样式修改</p>
        
        {/* 内联写法 */}
        <div style={
          {
            color: 'red',
            fontSize: '30px',
            fontWeight:'700'
          }
        }> React 使用style内联 </div>
      </div>
    );
  }
}

export default App;

创建App.js文件

.text {
  background-color: red;
  color: white;
}

React 的scoped 设置组件专用css  命名为 组件名.moudle.css

1.类名最好使用驼峰命名，因为最终类名会生成 styles 的一个属性

2.css 文件后缀一定要是  组件名.module.css

import React from "react";
import style from './MySon.module.css';
// 可以打印 style css
console.log(style);
class MySon extends React.PureComponent {
  render() {
    return (
      // 添加两个 类名
      <div className={style.title1 + " " + style.title2}>
        子组件
      </div>
    );
  }
}
export default MySon;


// MySon.module.css

.title1 {
    color: red;
}
.title2 {
    font-size: 60px;
}