react中引入css的方式

react中引入css的方式有哪几种？

1.在组件内直接使用

const div1 = {
  width: '300px',
  margin: '30px auto',
  minHeight: '200px',
  boxSizing: 'border-box',
  background: '#ccc'
}

function Sus () {
  return <div style={div1}>
    <Suspense fallback={'loading...'}>
      <LazySuspense />
    </Suspense>
  </div>
}

这种写法的优点： 内联样式，样式之间不会有冲突

缺点：写法上都需要使用驼峰标识，某些样式没有提示，大量的样式，代码混乱，某些样式无法编写（比如伪类/伪元素）

2.组件中引入css文件

将css单独写在一个css文件中，然后在组件中直接引入

import '../App.css'

function Sus () {
  return <div className='App-header'>
    <Suspense fallback={'loading...'}>
      <LazySuspense />
    </Suspense>
  </div>
}

这种方式存在不好的地方在于样式是全局生效，样式之间会互相影响

3.组件中引入.module.css文件

import Style from './style.css'

function Sus () {
  return <div className='Style.box'>
    <Suspense fallback={'loading...'}>
      <LazySuspense />
    </Suspense>
  </div>
}

这种方式能够解决局部作用域问题，但也有一定的缺陷：

• 引用的类名，不能使用连接符(.xxx-xx),在javascript中是不识别的
• 所有的className都必须使用{style.className}的形式来编写
• 不方便动态来修改某些样式，依然需用使用内联样式的方式

4.CSS-in-JS,是指一种模式，其中css由javascript生成而不是在外部文件中定义

1. 创建一个style.js文件用于存放样式文件：

export const SelfLink = styled.div`
  height: 50px;
  border: 1px solid red;
  color: yellow;
`
export const SelfButton = styled.div`
  height: 150px;
  width: 150px;
  color: ${props => props.color};
  background-image: url(${props => props.src});
  background-size: 150px 150px;
`

2. 引入样式

import { SelfLink, SelfButton } from './style'

function Sus () {
  return <div>
    <SelfLink title='sss'>xxxxx</SelfLink>
    <SelfButton color="palevioelered" style={{color: 'pink'}}>SelfButton</SelfButton>
  </div>
}

css in js 可以满足大部分场景的应用，可以类似于预处理器一样样式嵌套、定义、修改状态等。