这篇文章将为大家详细讲解有关styled-components怎么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
styled components 一种全新的控制样式的编程方式，它能解决 CSS 全局作用域的问题，而且移除了样式和组件间的映射关系
import React from 'react';
import styled from 'styled-components';
import { render } from 'react-dom';
const Title = styled.h2`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
class App extends React.Component {
render() {
return (
Hello world
)
}
}
render(
styled.h2 是一个标签模板函数
styled.h2 函数返回一个 React Component ， styled components 会为这个 React Component 添加一个 class ，该 class 的值为一个随机字符串。传给 styled.h2 的模板字符串参数的值实际上是 CSS 语法，这些 CSS 会附加到该 React Component 的 class 中，从而为 React Component 添加样式
二、基于 props 定制主题
const Button = styled.button`
background: ${props => props.primary ? 'palevioletred' : 'white'};
color: ${props => props.primary ? 'white' : 'palevioletred'};
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
render(
Primary
);我们在组件中传入的所有 props 都可以在定义组件时获取到，这样就可以很容易实现组件主题的定制。如果没有 styled-components 的情况下，需要使用组件 style 属性或者定义多个 class 的方式来实现
三、组件样式继承
通常在 css 中一般会通过给 class 传入多个 name 通过空格分隔的方式来复用 class 定义，类似 class="button tomato" 。在 styled-components 中利用了 js 的继承实现了这种样式的复用：
const Button = styled.button` color: palevioletred; font-size: 1em; margin: 1em; padding: 0.25em 1em; border: 2px solid palevioletred; border-radius: 3px; `; const TomatoButton = Button.extend` color: tomato; border-color: tomato; `;
子组件中的属性会覆盖父组件中同名的属性
四、组件内部使用 className
在日常开发中总会出现覆盖组件内部样式的需求，你可能想在 styled-components 中使用 className ，或者在使用第三方组件时。
Hello Word
五、组件中维护其他属性
styled-components 同时支持为组件传入 html 元素的其他属性，比如为 input 元素指定一个 type 属性，我们可以使用 attrs 方法来完成
const Password = styled.input.attrs({
type: 'password',
})`
color: palevioletred;
font-size: 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;在实际开发中，这个方法还有一个有用处，用来引用第三方类库的 css 样式：
const Button = styled.button.attrs({
className: 'small',
})`
background: black;
color: white;
cursor: pointer;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid black;
border-radius: 3px;
`;编译后的 html 结构如下：
