原文链接:https://blog.csdn.net/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'] }
导入并使用模块化样式
-
导入被模块化的样式表:
import cssObj from '样式表的相对路径'
-
使用模块化的样式:
{ /* 使用单个样式 */ } <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
-
安装依赖项:
npm install styled-components -S
-
在需要的组件内,导入依赖包:
import styled from 'styled-components'
-
创建带样式的自定义组件:
const MyButton = styled.button` background: transparent; border-radius: 3px; border: 2px solid palevioletred; color: palevioletred; margin: 0 1em; padding: 0.25em 1em; `