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>