一、类名

Tip：class要写成calssName，各组件之间命名不能一样

  1. //1.在src下新建一个.css文件,可以写样式
  2. //2.在.js文件中导入.css文件,
  3. import './App.css'
  4. //3.App.js，class样式命名要写成className
  5.  <div className="App">
  6.       hello world 
  7.   </div> 
  9.  // App.css
  10.   .App{
  11.       color:red;
  12.   }
  13. //每个.js文件对应一个.css样式文件,类名不要重复。

二、解决命名重复

2-1 styled-components

  1. //1.安装依赖
  2. yarn add styled-components
  1. //2.新建一个样式组件components-style/Wrapper.js，导入依赖
  2. import styled from 'styled-components';
  3. const Title = styled.h1`     //样式
  4. font-size:1.5em;
  5. text-align:center;
  6. color:red;
  7. `
  8. export default Title;
  1. //3.在主组件中导入Title这个样式组件并使用
  2. import Title from './components-style/Wrapper'
  3. class App extends React.Component{
  4.   render(){
  5.     return(
  6.       <div>
  7.         <Title>react</Title>
  8.       </div>
  9.     )
  10.   }
  11. }

2-2 嵌套

  1. //Wrapper.js
  2. import styled from 'styled-components';
  3. const Title = styled.h1`
  4. font-size:1.5em;
  5. text-align:center;
  6. color:red;
  7. .one{
  8.     color:pink;
  9. }
  10. h4{
  11.     color:deeppink;
  12. }
  13. &:hover{
  14.     color:yellow
  15. }
  16. `
  17. //&表示的就是h1,就是最外层的元素，不用&也可以达到相同效果
  18. export default Title;
  20. //App.js
  21. class App extends React.Component{
  22.   render(){
  23.     return(
  24.       <div>
  25.         <Title>react
  26.           <p class="one">hello world</p>
  27.           <h4>我喜欢react</h4>
  28.         </Title>
  30.       </div>
  31.     )
  32.   }
  33. }

三、内联样式

Tip:内联使用双括号

  1. constructor(props) {
  2.         super(props)
  3.         this.state = {
  4.             color:"blue"
  5.         }
  6.     }
  8. <p style={{width:300,marginRight:"10px",color:this.state.color}}>hello world</p>