styled-components - 组件样式化
Installation
npm install --save styled-components
example:
常规写法：
<style>
h1.title{ font-size:1.5em;color:red;}
</sytle>
<h1 className="title">hello word</h1>
import styled form 'styled-components' //引入
// 定义样式
const Title = styled.h1`
font-size: 1.5em;
color: red;
`;
// 应用
<Title>hello word</Title>
styled-components写法；
两者语法很相似，但他们的关键区别在于样式现在是组件的一部分了，摆脱了css类名（去类名no-classes）作为组件和其样式的中间步骤这种情况
通过 props 代替 class
为了遵循“去类名”（no-classes）的理念，当需要定义一个组件的行为时，styled-component使用属性而不是类名。
const Title = styled.h1`
font-size: 1.5em;
color: ${props=> props.primary ? 'blue' : '#333' };
`;
<Title primary>hello word </Title>
