1. React中的样式
React并没有像Vue那样提供特定的区域给我们编写CSS代码
所以你会发现在React代码中, CSS样式的写法千奇百怪
2. 内联样式
- 内联样式的优点:
- 内联样式, 样式之间不会有冲突
- 可以动态获取当前state中的状态
- 内联样式的缺点：
- 写法上都需要使用驼峰标识
- 某些样式没有提示
- 大量的样式, 代码混乱
- 某些样式无法编写(比如伪类/伪元素)
class App extends React.Component{ constructor(props){ super(props); this.state = { color: 'red' } } render(){ return ( <div> <p style={{fontSize:'50px', color: this.state.color}}>我是段落1</p> <p style={{fontSize:'50px', color:'green'}}>我是段落2</p> <button onClick={()=>{this.btnClick()}}>按钮</button> </div> ); } btnClick(){ this.setState({ color: 'blue' }) } } export default App;
3. 外链样式
将CSS代码写到一个单独的CSS文件中, 在使用的时候导入进来
- 外链样式的优点:
- 编写简单, 有代码提示, 支持所有CSS语法
- 外链样式的缺点：
- 不可以动态获取当前state中的状态
- 属于全局的css，样式之间会相互影响
//Home.tsx文件 import React from 'react'; import './Home.css' class Home extends React.Component{ render() { return ( <div id={'home'}> <p>我是home段落</p> <a href={'www.it666.com'}>我是home超链接</a> </div> ) } } export default Home;
/*Home.css文件*/ #home p{ font-size: 50px; color: red; } #home a{ color: yellow; }
4.Css Module
- React的脚手架已经内置了css modules的配置：
- .css/.less/.scss 等样式文件都修改成 .module.css/.module.less/.module.scss 等；
- Css Modules优点
- 编写简单, 有代码提示, 支持所有CSS语法
- 解决了全局样式相互污染问题
- Css Modules缺点
- 不可以动态获取当前state中的状态
image.png
那么怎样解决Css Modules缺点不可以动态获取当前state中的状态的问题呢？
先来了解一下模板字符串
拓展点——模板字符串
ES6中的模板字符串
const str = `my name is ${name}, my age is ${age}`; console.log(str); // my name is yiya_xiaoshan, my age is 18
除此之外，react中还有一些ES6中没有的特性
在JS中除了可以通过()来调用函数以外,,其实我们还可以通过模板字符串来调用函数
function test(...args) { console.log(args); } test(1, 3, 5); // [ 1, 3, 5 ] test`1, 3, 5`; // [ [ '1, 3, 5' ] ]
通过模板字符串调用函数规律:
- 参数列表中的第一个参数是一个数组, 这个数组中保存了所有不是插入的值
- 参数列表的第二个参数开始, 保存的就是所有插入的值
总结结论
我们可以拿到模板字符串中所有的内容\所有非插入的内容
=>我们可以拿到模板字符串中所有插入的内容
所以我们就可以对模板字符串中所有的内容进行单独的处理
test`1, 3, 5, ${name}, ${age}`; // [ [ '1, 3, 5, ', ', ', '' ], 'yiya_xiaoshan', 18 ]
4. CSS-in-JS
1. 使用CSS-in-JS的原因
- 在React中, React认为结构和逻辑是密不可分的,所以在React中结构代码也是通过JS来编写的
正是受到React这种思想的影响, 所以就有很多人开发了用JS来编写CSS的库——styled-components / emotion - 利用JS来编写CSS, 可以让CSS具备
样式嵌套、函数定义、逻辑复用、动态修改状态等特性, 也就是说, 从某种层面上, 提供了比过去Less/Scss更为强大的功能,所以Css-in-JS, 在React中也是一种比较推荐的方式
2.styled-components使用
- 安装styled-components
npm install styled-components --save - 导入styled-components
import styled from 'styled-components'; - 利用styled-components创建组件并设置样式
styled.divxxx:xxx
import React from 'react'; import styled from 'styled-components'; // 注意点: // 默认情况下在webstorm中编写styled-components的代码是没有任何的代码提示的 // 如果想有代码提示, 那么必须给webstorm安装一个插件 const StyleDiv = styled.div` p{ font-size: 50px; color: red; } a{ font-size: 25px; color: green; } `; class Home extends React.Component{ render() { return ( <StyleDiv> <p>我是home段落</p> <a href={'www.it666.com'}>我是home超链接</a> </StyleDiv> ) } } export default Home;
5. styled-components
5.1 styled-components特性之- props(回调函数)和- attrs
import React from 'react'; //1.导入style-components库 import styled from 'styled-components'; //2.通过回调函数调用props里头的数据 // 通过回调函数调用attrs设置样式 const StyleDiv = styled.div` p{ font-size: 50px; color: ${props => props.color}; } `; const StyleInput = styled.input.attrs({ type:'password' })`` class Home extends React.Component{ constructor(props){ super(props); this.state = { color: 'red' } } render() { return ( <StyleDiv color={this.state.color}> <p>我是home段落</p> <a href={'www.it666.com'}>我是home超链接</a> <button onClick={()=>{this.btnClick()}}>按钮</button> <StyleInput></StyleInput> </StyleDiv> ) } btnClick(){ this.setState({ color: 'green' }) } } export default Home;
5.2 如何通过style-components统一设置样式——ThemeProvider
// 在App.js引入ThemeProvider import { ThemeProvider } from 'styled-components';
<!--通过需要应用样式的组件用ThemeProvider包裹--> <ThemeProvider theme={{size:'100px',color:'green'}}> <Header/> <Header name={"sjl"} age={20}></Header> </ThemeProvider>
高阶组件会自动将其ThemeProvider提供的数据保存到子代的props
import React from 'react' import ReactTypes from 'prop-types' import styled from 'styled-components' const StyleDiv1 = styled.div` p{ color:${props=>props.theme.color}; font-size:${props=>props.theme.size} } ` function Header(props) { console.log(props) return ( <div> <div className={'header'}>我是头部</div> <StyleDiv1>我的世界</StyleDiv1> </div> ) } export default Header;
5.3 style-components的继承关系
import React from 'react'; import styled from 'styled-components' /* const StyleDiv1 = styled.div` font-size: 100px; color: red; background: blue; `; const StyleDiv2 = styled.div` font-size: 100px; color: green; background: blue; `; */ const BaseDiv = styled.div` font-size: 100px; background: blue; `; const StyleDiv1 = styled(BaseDiv)` color: red; `; const StyleDiv2 = styled(BaseDiv)` color: green; `; class App extends React.Component{ render(){ return ( <div> <StyleDiv1>我是div1</StyleDiv1> <StyleDiv2>我是div2</StyleDiv2> </div> ); } } export default App;
