博客

在react之中使用css不像vue之中那么方便，react官方也没有很统一的用法，下面是有关于styled-component的使用。


1、安装库

yarn add styled-components

2、基本使用


在其中styled.div“代表的是div的css样式，在其中.banner表示div下的类名为banner的节点。span之下的&.active，代表的是span标签并且类为active的。

import styled from 'styled-components';

export const HomeWrapper = styled.div`
  font-size: 12px;
  color: red;

  .banner {
    background-color: blue;

    span {
      color: #fff;

      &.active {
        color: red;
      }

      &:hover {
        color: green;
      }

      &::after {
        content: "aaa"
      }
    }

    /* .active {
      color: #f00;
    } */
  }
`

这样设置以后，只需要将div标签改为改为HomeWrapper组件即可。

import React, { PureComponent } from 'react';

import { 
  HomeWrapper,
} from "./style";

export default class Home extends PureComponent {
  render() {
    return (
    //原本是<div>
      <HomeWrapper>
        <div className="banner">
          <span>轮播图1</span>
          <span className="active">轮播图2</span>
          <span>轮播图3</span>
          <span>轮播图4</span>
        </div>
      </HomeWrapper>
    )
  }
}

2、props穿透


例如在使用styled-components时将input设置样式

可以从props之中获取有关的属性来进行样式的设定

const HYInput = styled.input`
  background-color: lightblue;
  color: ${props => props.color};
`
export default class Profile extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      color: "purple"
    }
  }

  render() {
    return (
      <div>
        <input type="password"/>
        //此处依旧还是可以设置input的type属性
        <HYInput type="password" color={this.state.color}/>
        <h2>我是Profile的标题</h2>
        <ul>
          <li>设置列表1</li>
          <li>设置列表2</li>
          <li>设置列表3</li>
        </ul>
      </div>
    )
  }
}

3、attrs的使用


可以在上述代码之中对const HYInput = styled.input后面紧跟attrs函数，传入一些固定的样式设置，在“之中设置样式的时候依旧是通过props进行获取。

const HYInput = styled.input.attrs({
  placeholder: "coderwhy",
  bColor: "red"
})`
  background-color: lightblue;
  border-color: ${props => props.bColor};
  color: ${props => props.color};
`

4、样式的继承


如果有相同的部分可以进行样式的继承。

例如下面两个设置的样式有大部分相同

const HYButton = styled.button`
  padding: 10px 20px;
  border-color: red;
  color: red;
`

const HYPrimaryButton = styled.button`
  padding: 10px 20px;
  border-color: red;
  color: #fff;
  background-color: green;
`

继承的操作如下：

const HYPrimaryButton = styled(HYButton)`
  color: #fff;
  background-color: green;
`

5、主题的设置


可以设置大部分运用到的色调样式进行主题的设置。

需要导入：

import styled, { ThemeProvider } from 'styled-components';

在组件外层的嵌套如下，其中属性theme传一个对象，css主题样式。

export default class App extends PureComponent {
  render() {
    return (
      <ThemeProvider theme={{themeColor: "red", fontSize: "30px"}}>
        <Home />
        <hr />
        <Profile />
        <HYButton>我是普通的按钮</HYButton>
        <HYPrimaryButton>我是主要的按钮</HYPrimaryButton>
      </ThemeProvider>
    )
  }
}

在子孙组件之中如下获取css样式：

export const TitleWrapper = styled.h2`
  text-decoration: underline;
  color: ${props => props.theme.themeColor};
  font-size: ${props => props.theme.fontSize};
`