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

原创

杨不易呀

发布于 2023-09-30 14:59:34

4880

文章被收录于专栏：杨不易呀杨不易呀

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/yangbuyiya/'}>我是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/yangbuyiya/'}>我是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/yangbuyiya/'}>我是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

最后

本期结束咱们下次再见👋~

🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗

我正在参与2023腾讯技术创作特训营第二期有奖征文，瓜分万元奖池和键盘手表

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

2023腾讯·技术创作特训营第二期

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

2023腾讯·技术创作特训营第二期

登录后参与评论

0 条评论

热度