Style-Components 浅体验

Style-Components 浅体验

当你还在烦恼你的 css 为啥总是会影响到其他的组件，可以考虑下 style-component 了！官方 icon 就很魔性

01 安装

$ npm install --save styled-components

02 简单使用下

首先创建一个 style.js 来编写 css, 对！你没有听错，css 写在 js 中。

// style.js
import styled from "styled-components"

export const HelloDiv = styled.div`
    width: 200px;
    text-align: center;
    background-color: orange;
    color: yellow;
    .box {
        color: blue;
    }
`

再然后，把 style.js 引入到 Hello.jsx ，使用 HelloDiv 作为标签名，就会得到一个语义化的自定义标签。

// Hello.jsx
import { HelloDiv } from "./style"

export default function Hello () {
    return(
        <HelloDiv>
             Hello style-components
             <div className="box">
                 我是 box
             </div>
        </HelloDiv>
    )
}

然后，咱们打开控制台瞧瞧，给咱 Hello组件 起了啥标签名

神奇不，再也不用担心，写的样式影响到其他的组件啦…

03 扩展：ThemeProvider

假如你项目当下或者未来有定制化 theme 的需求，快来看这，来对地啦！

使用方式：

首先你需要定义一个存放定义各种各样的主题样式 theme.js

// theme.js
export default {
  c_blue: "#3B81F7", *// 蓝色*
  c_yellow: "#FFA800", *// 黄色*
  c_red: "#FF2121", *// 红色*
  c_green: "#07C160", *// 绿色*
  c_white: "#FFFFFF", *// 白色*
}

然后，在你项目最最最..最根标签下，使用 styled-components 提供的 ThemeProvider 标签包裹起来，再把你定义好的 theme 的作为 props 引入进去

// src/index.jsx
import { ThemeProvider } from "styled-components"
import theme from "./theme"

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider  theme={ theme }>
      <App />
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

接下来，你就愉快地使用你在 theme.js 定义的颜色

// Hello/style.js
import styled from "styled-components"

export const HelloDiv = styled.div`
    width: 200px;
    text-align: center;
    background-color: ${p => p.theme.c_orange};
    color: ${p => p.theme.c_yellow} ;
    .box {
        color:${p => p.theme.c_blue} ;
    }
`

04扩展：createGlobalStyle

用于覆盖全局样式，比如想修改UI 框架默认的样式…

使用方式：

这边以修改 antd 的 <Button /> 组件为例

首先，使用 style-components 的 createGlobalStyle API 创建一个需要覆盖的样式

// style.js
import {createGlobalStyle} from "styled-components"

export const StyledIndex = createGlobalStyle`
    .ant-btn-primary {
        background-color: orange;
    }
`

接着，引用需要的覆盖的样式的组件中去

// index.js
import { StyledIndex } from './style.js';
import { Button } from 'antd';

ReactDOM.render(
  <>
    <StyledIndex></StyledIndex>
    <Button type="primary">Primary Button</Button>
  </>,
  document.getElementById('container'),
);

当组件被 render 的时候，读到 StyledIndex 就会被注入全局样式中去，变成下面这样…

还有一种情况，就是你只是想单独定制，但不影响到其他组件的样式，可以这样做：

定义 MyButton组件

// MyButton.jsx
import { StyledIndex } from './style.js';
import { Button } from 'antd';
import React from 'react';

export default function MyButton (props) {
    return (
      <>
        <StyledIndex></StyledIndex>
        <Button type="primary" {...props} className={`mybtu ${props.className || ''}`}>MyButton</Button>
      </>
    )
}

// style.js
import {createGlobalStyle} from "styled-components"

export const StyledIndex = createGlobalStyle`
	// 用 mybtu 类名包裹起来
    .mybtu {
      &.ant-btn-primary {
          background-color: orange;
      }
    }
`

然后引入到 index.js 就会得到：

// index.js
import { Button } from 'antd';
import MyButton from "./MyButton.jsx"

ReactDOM.render(
  <>
     <Button type="primary">Primary Button</Button>
     <MyButton />
  </>,
  document.getElementById('container'),
);

05 后面的学习到在继续更新

🌊翻滚吧后浪…