聊聊react中的样式

聊聊react中的样式

1.行内式

<div style={{backgroundColor:"red"}}>

2.内联式

const cssstyle = {
    width:100px
}
<div style={cssstyle}> 

3.外联式-整体引入

import './BaseView.css';
<div className="baseView"> 

4.外联式-按需引入（css module）

4.1 需要eject使用css-loader

import styles from './BaseView.css';
<div className={styles.baseView}> 

4.2 不需要eject,css文件命名需要XXX.module.css

import styles from './BaseView.module.css';
<div className={styles.baseView}> 

5.setyled-component

const RedButton = styled.div`
  color: red;
`;
<RedButton />

参考

[1].create-react-app不用eject就能使用css module特性

[2].我为什么使用styled-components