styled-components 样式组件

[MayOMengxuhui]

styled-components

背景

• 使用React的过程中，组件通过 JS 来定义 css 样式，就必须在 React 组件里面通过style属性来写。

  export class App extends React.Component {
  render() {
      return(
          <div style={{marginTop: '10px'}}>
              ......
          </div>
      );
  }
  }

  缺点：

  （1）样式属性与原生 css 的写法不一致，样式名称必须用驼峰的命名方式来命令，而不是多个单词用-号分隔；单位的写法也不一致，百分比是用字符串形式。 （2）无法写伪元素，要实现hover的话就必须使用onMouseOver事件来实现，而且要写很多 JS 代码，像before和after这类伪元素则根本没法通过这种方式实现。

  为了顺应组件化的潮流，人们开始考虑使用JS上编写CSS，styled components就是其中一种解决方案。styled components是一个React第三方库，作用是可以将样式写成组件的形式，实现在JS上编写CSS

  基本用法

• 使用styled-components不需要再使用className属性来控制样式，而是将样式写成更具语义化的组件的形式，如下例：

import React from 'react';
import styled from 'styled-components'; 

const Title = styled.h1`
    font-size: 1.5em;
    text-align: center;
    color: red;
`;

class App extends React.Component {
    render() {
        return (
            <Title>Hello styled--components</Title>
        )
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

示例： 上例中的styled.h1是一个标签模板函数，紧跟其后的是一个模板字符串参数，“标签模板”和“模板字符串”都是es6的语法。styled.h1函数返回一个React Component，styled components会为这个React Component添加一个class，该class的值为一个随机字符串。传给styled.h1的模板字符串参数的值实际上是CSS语法，这些CSS会附加到该React Component的class中，从而为React Component添加样式。

props参数控制样式

• 在React中是通过控制className和style来控制样式的，如下例，App组件需要判断是否有primary属性来判断是否渲染”title-primary”类的样式：

  export class App extends React.Component {
  render() {
      let className = this.props.primary ? "title-primary" : '';
      return(
          <div className={className}>
              ...
          </div>
      );
  }
  }

  styled components使用props来控制样式，将控制样式代码放在样式组件中，使React组件更加简洁：

  const Title = styled.div`
  font-size: 1.5em;
  text-align: center;
  color: ${props => props.primary ? 'blue' : ' red'};
  `
  export class App extends React.Component {
  render() {
      return (
          <Title primary>
              Hello Styled-Component
          </Title>
      )
  }
  }

styled components的写法中样式组件暴露props让外层JS来控制样式，不再需要className或style这样的“中间人”，移除了样式和组件间的映射关系。

CSS作用域

• CSS有一个痛点——CSS的作用域是全局的。当两个CSS选择器有冲突时，会根据选择器的权值确定使用哪一个选择选择器。当项目较大时，编写的css选择器很难判断会不会把另外一个选择器冲掉。 解决CSS作用域的其中一个方法就是使用后代选择器，这种用法和命名空间相似，即在每个选择器前添加一个父元素的选择器，从而减少选择器冲突的概率。 使用styled components会给生成的React组件添加一个值为随机字符串的className。使用同一个styled components生成的多个React组件的className是不同的，这种随机className的机制使得组件之间的className值不会冲突，从而解决了CSS全局作用域的问题。

  styled components也支持css的嵌套语法：

  
  const Title = styled.div`
  font-size: 1.5em;
  text-align: center;
  .content1 {
         color: #f16da7;
         margin: 10px;
   }
   .content2 {
       color: #98a514;
   }
  `;

export class App extends React.Component { render() { return (

    )
}

}

 示例
![1522584049702](https://user-images.githubusercontent.com/32735787/38172912-6bc92bd4-35e7-11e8-9d08-95169d83e272.jpg)

### 组件样式继承
 - 通常在 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; ;

export class App extends React.Component { render() { return (

styled-components ) } } ``` 示例   我们可以看到在原生的样式和组件之间是多对多的映射关系，styled-components 通过继承彻底的移除了这种只为了样式而存在映射关系。组件内部会执行类似于对象合并的操作，子组件中的属性会覆盖父组件中同名的属性。 ### styled-components中的 `attrs` styled-components 同时支持为组件传入 html 元素的其他属性，比如为 input 元素指定一个 type 属性，我们可以使用 attrs 方法来完成： ``` const Password = styled.input.attrs({ type: 'password' })` border: 1px solid #ccc; padding: 7px 0px; border-radius: 3px; padding-left:5px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; `; export class App extends React.Component { render() { return ( ) } } ``` 示例  在实际开发中，这个方法还有一个有用处，用来引用第三方类库的 css 样式和自己定义的类名： ``` const Row = styled.div.attrs({className: "row"})` color: palevioletred; font-size: 1em; margin: 1em; ` export class App extends React.Component { render() { return ( hello styled-components ) } } ``` 示例  ### theme 特性 - styled-components 里面还有一个比较特别的特性是theme，它利用了 React 的context特性来传递其中的参数，可以让样式对象直接从最上层的组件传递到最下层的组件。 ``` const Box = styled.div` color: ${props => props.theme.color}; `; export class App extends React.Component { render() { return ( sI'm mediumseagreen! ) } } ``` 示例  ### 独立样式文件 在一般的 React 组件中，样式和组件文件是分离的（比如 App.js 和 style.css），使用了 styled-components 后其实也可以沿用这种方式来组织文件，定义一个style.js文件来写样式对象，然后在组件文件中引入该样式文件。 ``` // style.js import styled from 'styled-components'; export const AppDiv = styled.div` color: palevioletred; font-size: 1em; margin: 1em; `; // App.js import React from 'react'; import * as css from './style'; export class App extends React.Component { render() { return ( Hello styled-components ) } } ``` ### 总结 1. 可以在样式定义中直接引用到 js 变量，共享变量，非常便利； 2. 支持组件之间继承，方便代码复用，提升可维护性； 3. 兼容现有的 className 方式，升级无痛； 参考链接： [https://www.styled-components.com/](https://www.styled-components.com/)

[kmvan]

这篇文章有点老了，现在已经不使用 .extend 这个方法了。