React之中的styled-components

在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';
// 可以内嵌多个 会生成一个div标签
/**组件内会创建一个div标签 */
export const HomeWrapper = styled.div`
	font-size: 12px;
	color: ${props => props.color};  // props穿透
	.banner {
		background-color: blue;
	}

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

import React, { PureComponent } from 'react';

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

export default function Page() {
	return (
		<>
			<HomeWrapper color="purple"> 
				kkk---
				<div>HomeWrapper</div>
				<span> HomeWrapper </span>
				<div className="banner">banner</div>
				<Item>yellow 继承</Item>
				<HYInput color="yellow"></HYInput>
				<TitleWrapper>主题继承</TitleWrapper>
			</HomeWrapper>
			<div className="banner">外面的banner</div>
		</>
	);
}

3、attrs的使用

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

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

4、样式的继承

如果有相同的部分可以进行样式的继承。
例如下面两个设置的样式有大部分相同

/**组件内会创建一个div标签 */
export const HomeWrapper = styled.div`
	font-size: 12px;
	color: ${props => props.color};
	.banner {
		background-color: blue;
	}
`;
export const Item = styled(HomeWrapper)`
	background: yellow;
`;

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 />
      </ThemeProvider>
    )
  }
}

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

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