推荐一个在react项目中为元素添加样式的第三方库(styled-components)(css in js方案)

1、安装插件

pnpm

      pnpm i styled-components 

npm

      npm install styled-components

yarn 

       yarn add styled-components

2、创建一个js文件用于写样式（模板字符串写法）

（1）以App.jsx组件为例，创建一个style.js样式文件，创建组件并暴露

// 从styled-components库中导入styled函数  
import {styled} from "styled-components";  
  
// 使用styled函数创建一个针对ul元素的样式组件，并将其导出为UlContainer  
// 这意味着你可以在其他JavaScript/JSX文件中通过import引入UlContainer并使用它  
// 来应用特定的样式到ul元素上，而无需直接使用CSS类或内联样式  
export const UlContainer = styled.ul`  
  // 这里的CSS样式将被应用到所有使用UlContainer组件的ul元素上  
  // 这里设置的样式是文本颜色为橙色  
  color: orange;  
`

 （2）在App组件中引入并使用

import {UlContainer} from "./style.js";
export default () => {
    return（
        <UlContainer>
            {list.map((item, i) => (
              <li key={i}>{item.name}</li>
            ))}
         </UlContainer>
    ）
    
}

（3）支持嵌套语法

import {styled} from "styled-components";
export const UlContainer = styled.ul`
  color: orange;
  li{
    border: 1px solid deepskyblue;
    &:hover{
      background: aquamarine;
    }
  }
`

3、props传参

（1）普通传参

App.jsx(传入参数)

import {UlContainer} from "./style.js";
export default () => {
    return（
        <UlContainer bcolor='#ddd' color='deepskyblue'>
            {list.map((item, i) => (
              <li key={i}>{item.name}</li>
            ))}
         </UlContainer>
    ）
    
}

style.js(通过props接收参数)

import {styled} from "styled-components";
export const UlContainer = styled.ul`
  color: ${props => props.color};
  li{
    border: 1px solid ${({bcolor}) => bcolor};
  }
`

（2）参数默认值

假如在组件内没有传入参数

import {UlContainer} from "./style.js";
export default () => {
    return（
        <UlContainer>
            {list.map((item, i) => (
              <li key={i}>{item.name}</li>
            ))}
         </UlContainer>
    ）
    
}

style.js依旧接了参数，就可以给它一个参数默认值

import {styled} from "styled-components";
export const UlContainer = styled.ul`
  color: ${props => props.color || 'deepskyblue'}; // 如果用户没传入值，就使用后面的默认值
  li{
    border: 1px solid ${({bcolor}) => bcolor || 'deeppink'};
  }
`

以上模板字符串写法很多小伙伴用不习惯，样式组件目前还支持以下写法

4、样式组件的其他写法（对象写法）

（1）基本使用

import {styled} from "styled-components";
export const UlContainer = styled.ul({
  color:'red'
})

（2）嵌套语法

import {styled} from "styled-components";
export const UlContainer = styled.ul({
  color:'red',
  li:{
    border: '1px solid blue',
    '&:hover':{
      background: 'aquamarine'
    }
  }
})

（3）props传参及参数默认值（传入一个函数并返回一个对象）

import {styled} from "styled-components";
export const UlContainer = styled.ul(({color = 'purple',border = 'blue'}) =>(
  {
    color:border,
    li:{
      border: `1px solid ${color}`,
      '&:hover':{
        background: 'aquamarine'
      }
    }
  }
))

通过以上对styled-components写法的基本介绍，希望小伙伴们能喜欢上这种写法，采用css in js这种方案能解决在react项目中写样式遇到的大多数问题，比如样式冲突等。如果小伙伴们有什么问题请在评论区讨论。。。