React从0开始（十二）：React之CSS IN JS

小阿托
271 阅读3分钟

这是我参与11月更文挑战的第13天，活动详情查看：2021最后一次更文挑战

在前面几篇文章里，我们都有了解到了React的JSX写法、生命周期、组件间通信手段以及各种不同的钩子React Hooks，今天我们一起来了解一下在React中如何编写样式

在使用Vue的时候编写样式十分方便，style scoped就能够轻松写样式了，写原生小程序的时候直接在对应页面的wxss文件里写样式也十分简单，但是在React中则要注意到CSS样式作用域污染的问题。

在面对这一个问题时，我有了解到以下的解决方法：

一、原生写法

做法：在函数中定义对应样式对象，随后在标签中的style属性指定这一对象（注意：属性需要驼峰命名）

render() {
    const styleText = {
        backgroundColor : 'red'
    }
    return (
        <div>
            <h1 style={styleText}>Hello React</h1>
        </div>
    )
}

但是我个人认为，如果需要的样式太多，这样写会让我觉得特别乱。

二、CSS IN JS

顾名思义，就是用JS来写CSS，我认为是原生写法的一种改进，最简单的方式，我们可以定义一个JS文件用来写各个样式的对象，最后在使用样式的组件中导入并使用即可

//这个是定义各种样式的文件Style.js
const TextStyle = {
    fontSize:'20px',
    color:'blue'
}
export default {
    TextStyle
}
//这个是使用样式TextStyle的文件
import Style from './Css/Style'
...
render() {
    return (
        <div>
            <h1 style={Style.TextStyle}>Hello React</h1>
        </div>
    )
}

就可以得到以下效果了：

image.png

用对象的方式来写CSS，我们就能够很好地利用JS对对象的操作对不同的样式进行各种各样的玩法，比如：

  1. 定义一个基础样式，如果有需要变化的地方则在这个基础上进行定制
  2. 还可以根据条件对标签的Style进行样式的快速切换甚至是多个样式的合并

代码示例如下：

//样式的DIY
const BaseStyle = {
    backgroundColor : 'blue',
    fontSize : '20px'
}
const NewStyle = {
    ...BaseStyle,
    fontSize : '16px',
    fontWeight : 'bolder'
}

//样式的切换以及条件选择
<div  style={ this.state.theme === "dark" ? Style.DarkStyle : Style.LightStyle } >Hello React</div>

//样式的合并
<div style={ { ...Style.AStyle , ...Style.BStyle } }>Hello React<div>

这样写确实是方便许多，但是这么写也是有麻烦之处，因为我们写的是对象，因此我们在定义各个属性的时候（比如backgroundColor）是没有写CSS时的代码提示的，因此我们在编写的时候要格外小心是否有拼写错误。

CSS IN JS库的使用：我们来看看一个较为流行的库style-components

npm install styled-components

在Style.js中导入styled-components库并使用

import Styled from 'styled-components';

我们下面来总结一些基本的使用方法：

  1. 假定上方导入了Styled，我们就可以通过Styled.标签来得到一个对应的标签组件（Styled.button返回一个button按钮组件）
  2. 如果我们要对上一步返回的组件的样式进行修改，我们可以在Style.标签后面用 ` 符号来括住CSS属性，这里面就可以正常地写CSS了，不必再写fontSize了

剩下的其他的操作我们通过代码来看：

1.styled-components定义按钮组件

import Styled from 'styled-components';
const Button = Styled.button`
    background-color:blue;
    font-size:16px
`
export default {
    Button
}
//使用
import Style from './Css/Style';
...
render() {
    return (
        <>
            <Style.Button>Send</Style.Button>
        </>
    )
}

image.png

2.通过styled-component设置元素的attrs（此例配置placeholder）

做法：Styled.input.arrts({})

const Input = Styled.input.attrs({
    placeholder:"Hello"
})`
    width:120px;
    height:30px;
    font-weight:bolder;
`
//使用
return (
    <>
        <Style.Input />
    </>
)

image.png

3.设置组件变量即使用时的属性

做法：在CSS属性（如background）后写${ props => props.xxx }或${ props => props['xxx'] }两种写法均可

用法：<Div bgClr="blue">Hello<Div>

const Div = Styled.div`
    background-color : ${ props => props.bgClr || props["bgClrNew"] || 'white' }
`

4.组件的继承

可以通过styled(已有组件)进行继承，随后通过后边连接 `` 进行样式的修改

const Input = Styled.input.attrs({
    placeholder:"Hello"
})`
    width:120px;
    height:30px;
    font-weight:bolder;
`
// NewInput 继承 Input
const NewInput = Styled(Input).attrs({
    placeholder:"React"
})`
    background-color : red
`
//使用
<Style.NewInput />

image.png

avatar
文章
阅读
粉丝