3.0 在react如何编写组件的样式

原文链接：https://blog.youkuaiyun.com/zsm4623/article/details/86593273

1. 使用行内样式

注意点: react中规定,写行内样式时，要写在{{}}中，使用驼峰命名法

render(){
    return <div>
        {/* 第一个{}表示我们要在JSX里插入js了，第二个是对象的括号 */}
        <h1 style={{color:"red",fontSize:"20px"}}>使用行内样式</h1>
    </div>
}

我们还可以这样使用行内样式

//函数组件
function Button(props){
    const btnStyles = {
        width: props.style.width,
        height: props.style.height,
        background: props.style.background,
        color: props.style.color,
        border: props.style.border,
        outline: props.style.outline,
        cursor: props.style.cursor,
    };
    return (
        <div>
            <button style={btnStyles}>按钮</button>
        </div>
    )
}

//定义样式
const btnStyle = {
    width:"100px",
    height:"40px",
    background:"orange",
    color:"#ffffff",
    border:"none",
    outline:"none",
    cursor:"pointer"
};

//渲染到页面
ReactDOM.render(<Button style={btnStyle}/>,document.getElementById("example"));

2. 使用外联样式

• 配置对应的 loader 规则

  • 使用 .css 样式：
    安装 loader ：命令运行 npm i style-loader css-loader -D
    配置 loader ：在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

  //webpack.config.js
  { test: /\.css$/, use: ['style-loader', 'css-loader'] }
  

  • 使用 .less 样式：
    安装 loader：命令运行 npm i style-loader css-loader less-loader less -D
    配置 loader：在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

  //webpack.config.js
  { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
  

  • 使用 .scss 样式：

  ​ 安装 loader：命令运行 npm i style-loader css-loader sass-loader node-sass -D

  ​ 配置 loader：在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

  //webpack.config.js
  { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
  

• 加载外联样式
  在需要的组件内，使用 import '外联样式表相对路径' 语法导入外联的样式表；
  使用 className 属性(将class用className代替)为对应的组件添加样式类：

  <div className="font12 colorRed">使用外联样式表</div>
  

  注意：
  默认情况下，react 组件中使用 import 导入的样式表会在全局生效，并不存在模块作用域！
  同时，react 中并没有类似于 vue 的 scoped 指令；
  react中，可以开启 css 模块化功能，防止组件的样式在全局生效，从而解决组件间样式冲突问题！

css模块化

开启 css 模块化：

.css、.less、.scss 后缀名的样式表，都可以单独开启模块化功能，只需在对应的样式 loader 规则中找到 css-loader，并添加 modules 参数，即可开启 css 模块。

• .css 模块化：

  { test: /\.css$/, use: ['style-loader', 'css-loader?modules'] }
  

• .less 模块化：

  { test: /\.less$/, use: ['style-loader', 'css-loader?modules', 'less-loader'] }
  

• .scss 模块化：

  { test: /\.scss$/, use: ['style-loader', 'css-loader?modules', 'sass-loader'] }
  

导入并使用模块化样式

1. 导入被模块化的样式表：

   import cssObj from '样式表的相对路径'
   

2. 使用模块化的样式：

   { /* 使用单个样式 */ }
   <div className={ cssObj.类名 }>使用模块化的样式表</div>
   { /* 使用多个样式 */ }
   <div className={ [cssobj.类名1, cssobj.类名1].join(' ') }>使用模块化的样式表</div>
   
   <div className={cssObj.item}>
       <h1 className={cssObj['t-head']}>评论人：{props.user}</h1>
       <h5 className={cssObj['t-body']}>评论内容：{props.content}</h5>
   </div>
   

:local() 和 :global()

• 被模块化的样式表中，如果某个类被 :local() 包裹起来，则会被模块化；
• 如果类被 :global() 包裹起来，则不会被模块化，这个类默认全局生效；
• 注意： 只有 类选择器 和 Id选择器 会被模块化控制，其它选择器无法被模块化控制！

3. styled-components

1. 安装依赖项：

   npm install styled-components -S
   

2. 在需要的组件内，导入依赖包：

   import styled from 'styled-components'
   

3. 创建带样式的自定义组件：

   const MyButton = styled.button`
     background: transparent;
     border-radius: 3px;
     border: 2px solid palevioletred;
     color: palevioletred;
     margin: 0 1em;
     padding: 0.25em 1em;
   `