React-组件-CSS-In-JS重要特性

styled-components 特性

props

在前面的文章当中介绍了一个 styled-compoents 的一个动态修改状态的特性，这个特性就是借助 props 来实现的，如下, 假如我现在有这么一个需求就是点击一个按钮修改一下 p 标签的颜色：

import React from 'react';
import styled from 'styled-components';

const StyleDiv = styled.div`
    p{
        font-size: 50px;
        color: ${props => props.color};
    }
    a{
       font-size: 25px;
       color: #b0965b;
    }
`;

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={'https://www.cnblogs.com/BNTang/'}>我是home超链接</a>
                <button onClick={() => {
                    this.btnClick();
                }}>按钮
                </button>
            </StyleDiv>
        )
    }

    btnClick() {
        this.setState({
            color: 'green'
        });
    }
}

export default Home;

如上的主要流程就是通过按钮点击在方法当中修改了 state 当中的 color 属性值，然后在 StyleDiv 通过组件传参的形式进行传递给 StyleDiv, 通过 styled 创建出来的其实就是一个组件，所以这里可以通过组件传值进行在字符串模板当中进行使用即可。

attrs

在看 attrs 这个属性之前，我们在实现这么一个需求就是通过 styled 创建一个 input type 等于暗文的输入框：

import React from 'react';
import styled from 'styled-components';

const StyleDiv = styled.div`
    p{
        font-size: 50px;
        color: red;
    }
    a{
       font-size: 25px;
       color: #b0965b;
    }
`;

const StyleInput = styled.input``;

class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            color: 'red'
        }
    }

    render() {
        return (
            <StyleDiv>
                <p>我是home段落</p>
                <a href={'https://www.cnblogs.com/BNTang/'}>我是home超链接</a>
                <StyleInput type={'password'}/>
            </StyleDiv>
        )
    }
}

export default Home;

在我们需要创建表单这种元素的时候，如上代码是在使用的时候来指定 type 的其实在 styled 当中就是提供了一种方式在创建之前就可以明确的知道需要创建的组件的类型，那么就是通过 attrs，然后博主这里就紧接着提供了通过 attrs 创建的案例如下：

import React from 'react';
import styled from 'styled-components';

const StyleDiv = styled.div`
    p{
        font-size: 50px;
        color: red;
    }
    a{
       font-size: 25px;
       color: #b0965b;
    }
`;

const StyleInput = styled.input.attrs({
    type: 'password'
})``;

class Home extends React.Component {
    render() {
        return (
            <StyleDiv>
                <p>我是home段落</p>
                <a href={'https://www.cnblogs.com/BNTang/'}>我是home超链接</a>
                <StyleInput/>
            </StyleDiv>
        )
    }
}

export default Home;

设置主题

主题的含义就是设置全局的样式，通过 styled 如何来进行设置，在styled 当中提供了一个 ThemeProvider 可以通过它来进行传递全局主题的样式数据，然后在其它组件的 styled 当中进行使用即可如下：

App.js:

import React from 'react';
import Home from './component/Home'
import About from './component/About'
import {ThemeProvider} from "styled-components";

class App extends React.Component {
    render() {
        return (
            <ThemeProvider theme={{size: '50px', color: 'red'}}>
                <Home/>
                <About/>
            </ThemeProvider>
        );
    }
}

export default App;

Home.js:

import React from 'react';
import styled from 'styled-components';

const StyleDiv = styled.div`
    p{
        font-size: ${props => props.theme.size};
        color: ${props => props.theme.color};
    }
`;

class Home extends React.Component {
    render() {
        return (
            <StyleDiv>
                <p>我是Home段落</p>
            </StyleDiv>
        )
    }
}

export default Home;

About.js:

import React from 'react';
import styled from "styled-components";

const StyleDiv = styled.div`
    p{
        font-size: ${props => props.theme.size};
        color: ${props => props.theme.color};
    }
`;

class About extends React.Component {
    render() {
        return (
            <StyleDiv>
                <p>我是About段落</p>
            </StyleDiv>
        )
    }
}

export default About;

继承

在 styled-components 当中的继承是样式之间的继承，就是说如果两个组件之间有冗余的样式代码，这个时候就可以抽离出一个基础的样式组件，然后都统一继承这个基础的组件就可以了，具体的实现代码如下：

import React from 'react';
import styled from 'styled-components';

const BaseDiv = styled.div`
  font-size: 100px;
  background: green;
`;

const StyleDiv1 = styled(BaseDiv)`
  color: red;
`;

const StyleDiv2 = styled(BaseDiv)`
  color: pink;
`;

class App extends React.Component {
    render() {
        return (
            <div>
                <StyleDiv1>我是Div1</StyleDiv1>
                <StyleDiv2>我是Div2</StyleDiv2>
            </div>
        );
    }
}

export default App;

官方文档地址：https://styled-components.com/docs