react之styled-components

最新推荐文章于 2024-06-29 09:50:44 发布

wandoumm

最新推荐文章于 2024-06-29 09:50:44 发布

阅读量122

点赞数

分类专栏： react 文章标签： react.js

本文链接：https://blog.csdn.net/wandoumm/article/details/80168309

版权

react 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

安装

npm install styled-components 或
cnpm install styled-components 或
yarn add styled-components

引入

import styled from "styled-components"

基本用法：

const ContextBox = styled.div`
    width: 200px;
    height: 200px;
    background: red;
`
export default function(){
    return (
        <ContextBox></ContextBox>
    )
}

给子元素设置样式

const ContextBox = styled.div`
    width: 200px;
    height: 200px;
    background: red;
    p {
        font-size: 24px;
        color: #fff;
        text-align: center;
    }
    &::after {
        display: block;
        content: "hello world";
        font-size: 30px;
    }
`
export default function(){
    return (
        <ContextBox>
            <p>styled-components</p>
        </ContextBox>
    )
}

嵌套继承样式：

const Mainstyle = styled.div`
    span {
        font-size: 14px;
        color: yellow;
    }
`
const ContextBox = styled(Mainstyle)`
    width: 200px;
    height: 200px;
    background: red;
    p {
        font-size: 24px;
        color: #fff;
        text-align: center;
    }
    &::after {
        display: block;
        content: "hello world";
        font-size: 30px;
    }
`
export default function(){
    return (
        <ContextBox>
            <p>styled-components</p>
            <span>这是一个span标签</span>
        </ContextBox>
    )
}

变量控制样式：

const Mainstyle = styled.div`
    span {
        font-size: 14px;
        color: yellow;
    }
`
const ContextBox = styled(Mainstyle)`
    width: 200px;
    height: 200px;
    background: red;
    p {
        font-size: 24px;
        color: #fff;
        text-align: center;
    }
    &::after {
        display: block;
        content: "hello world";
        font-size: 30px;
    }
`
export default function(){
    return (
        <ContextBox>
            <p>styled-components</p>
            <span>这是一个span标签</span>
        </ContextBox>
    )
}