React编写CSS方式-CSDN博客
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |
1. css modules
css modules并不是React特有的解决方案而是所有使用了类似于
webpack配置的环境
下都可以使用的。
如果在其他项目中使用它那么我们需要自己来进行配置比如
配置webpack.config.js中的modules: true
等。
React的脚手架已经内置了css modules的配置
- .css/.less/.scss 等样式文件都需要修改成 .module.css/.module.less/.module.scss 等就可以直接进行引用
css modules确实解决了局部作用域的问题也是很多人喜欢在React中使用的一种方案。
缺陷
- 引用的类名不能使用连接符(.home-title)在JavaScript中是不识别的
-
所有的 className都必须使用{style.className} 的形式 来编写
-
不方便 动态来修改某些样式 依然 需要使用内联样式的方式
2. CSS in JS
概念
- “CSS-in-JS” 是指一种模式其中 CSS 由 JavaScript 生成而不是在外部文件中定义
-
注意此功能并不是 React 的一部分而是由第三方库提供
-
CSS-in-JS通过JavaScript来为CSS赋予一些能力包括类似于CSS预处理器一样的样式嵌套、函数定义、逻辑复用、动态修改状态等等
2.1 认识styled-components
npm install styled-components
styled-components的本质是通过函数的调用最终创建出一个组件
- 这个组件会被自动添加上一个不重复的class
-
styled-components会给该class添加相关的样式
支持类似于CSS预处理器一样的样式嵌套
- 支持直接子代选择器或后代选择器并且直接编写样式
-
可以 通过&符号获取当前元素
-
直接 伪类选择器、伪元素 等
props、attrs属性
- props可以传递
-
props可以被传递给styled组件
-
添加attrs属性
styles.js
import styled from "styled-components"
import {
primaryColor,
largeSize
} from "./style/variables"
// 1.基本使用
export const AppWrapper = styled.div`
.footer {
border: 1px solid orange;
}
`
// const obj = {
// name: (props) => props.name || "why"
// }
// 2.子元素单独抽取到一个样式组件
// 3.可以接受外部传入的props
// 4.可以通过attrs给标签模板字符串中提供的属性
// 5.从一个单独的文件中引入变量
export const SectionWrapper = styled.div.attrs(props => ({
tColor: props.color || "blue"
}))`
border: 1px solid red;
.title {
font-size: ${props => props.size}px;
color: ${props => props.tColor};
&:hover {
background-color: purple;
}
}
.content {
font-size: ${largeSize}px;
color: ${primaryColor};
}
`
App.jsx
import React, { PureComponent } from 'react'
import Home from './home'
import { AppWrapper, SectionWrapper } from "./style"
export class App extends PureComponent {
constructor() {
super()
this.state = {
size: 30,
color: "yellow"
}
}
render() {
const { size } = this.state
return (
<AppWrapper>
<SectionWrapper size={size}>
<h2 className='title'>我是标题</h2>
<p className='content'>我是内容, 哈哈哈</p>
<button onClick={e => this.setState({color: "skyblue"})}>修改颜色</button>
</SectionWrapper>
<Home/>
<div className='footer'>
<p>免责声明</p>
<p>版权声明</p>
</div>
</AppWrapper>
)
}
}
export default App