React 项目的css-in-js

1. css modules(配置typescript-plugin-css-modules完成类型申明)

1. 定义css的类型申明文件 custom.d.ts

   在我们在import 以css为后缀的文件都会遵循以下的约定，约定的内容是，将会导出key所在的对象，而原始的类名和相应的值都会转换为这个对象，而最后将会css对象

   declare module "*.css"{ // 在我们在import 以css为后缀的文件都会遵循以下的约定
   	const css:{[key:string]: string}
     export default css
   }
   

2. .css文件的文件命名规则： xxx.module.css

   xxx.module.css是css模块化的命名约定

3. 在.tsx的文件中使用css文件

   import style form './index.module.css'
   
   function App() {
     const [list, setList] = useState([])
     useEffect(()=> {
       fetch('xxxx').then(async res => {
         if(res.ok){
           setList(await res.json())
         }else{
           return Promise.reject()
         }
       })
     },[])
     return (
     	<div className={style.list}>
         { list.map((item,i) => (
           <div className={i%2>0? style.odd: style.even}> {item.name} </div>
         ))}
       </div>
     )
   }
   

4. 安装typescript-plugin-css-modules 插件，生成css文件所对应的引用类型

   npm i typescript-plugin-css-modules --save-dev
   

5. 配置 typescript-plugin-css-modules文件，打开tsconfig.json，在compilerOptions中添加plugins字段，注册启用这个插件

   "plugins": [
     { "name": "typescript-plugin-css-modules" }
   ]
   

2. emotion

1. 安装 emotion依赖：@emotion/react和@emotion/styled

   npm i @emotion/react @emotion/styled
   

2. 在index.tsx中使用emotion

   有一段行内样式

   import { Card } from 'antd'
   
   export const LoginCard = () => {
     return (
     	<div style={{ display: "flex", justifyContent: "center" }}>
       	<Card>
           <button>登录</button>
         </Card>
       </div>
     )
   }
   

   转换为emotion

   • 原生html标签的用法： styled.div
   • 组件标签的用法：styled(Card)

   import { Card } from 'antd'
   import styled from '@emotion/styled'
   
   export const LoginCard = () => {
     return (
     	<Container>
       	<ShadowCard>
           <button>登录</button>
         </ShadowCard>
       </Container>
     )
   }
   
   const Container = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   min-height: 100vh;
   `
   
   const ShadowCard = styled(Card)`
   width: 400px;
   min-height: 400px;
   box-shadow: rgba(0,0,0,0.1) 0 0 10px;
   `