前言

今天还是围绕react中的css解决方案写的一篇文章，根据神三元大佬的掘金小册，我尝试在自己的项目中使用styled-component，第一次接触大佬的编程思路，总体下来感觉收获良多，再次与大家分享。

styled-component

首先我们要知道啥是styled-component，首先可以说这是目前最受欢迎的JSS解决方案，首先我们要明确的一点就是这个东西的学习成本虽然不是所谓的零成本，但是总体来说并不高：

yarn add styled-component

我们从一个简单的例子看起：

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

const Home = () => {
  return (
    <Wrapper>
      <Title>
        Hello World!
      </Title>
  </Wrapper>
  )
}

从上面的例子可以简单的看出这个库的一个很好的地方，那就是语义化的标签。

而这时如果我们打开控制台来看这段代码：

<section class="sc-fzXfMx">
  <h1 class="sc-fzXfMw">Hello World!</h1>
</section>

因此还可以看到这个库比较好的解决了CSS作用域的问题，因为它可以保证生成的class标签名称的独一性。

再看几个例子

const Button = styled.button`
  /* Adapt the colors based on primary prop */
  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(
  <div>
    <Button>Normal</Button>
    <Button primary>Primary</Button>
  </div>
);

这时官网的例子，用来表示基于props的样式选择。

当然还有继承：

const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

同样还有很好用的改变基础类型的方法，比如把一个按钮在使用时变成链接:

<Button as="a" href="/">Link with Button styles</Button>

其他包括sass，less等嵌套语法之类的再次不在介绍。

Vscode 插件

很明显作为非传统CSS写法，注定要面对智能提示等不如CSS好用的问题，即使有Vscode插件：

vscode-styled-components

这个插件可以做到智能提示、代码高亮等比较简单的功能，用起来也有些限制，比如只有在styled``之后才能使用之类的。

不过总比没有好。

在项目中使用

大佬们都是先建立全局的样式的：

import { createGlobalStyle } from "styled-components";

export const GlobalStyle = createGlobalStyle`
  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, 
  blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, 
  img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i,
  center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption,
  tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,
  figure, figcaption, footer, header, hgroup, menu, nav, output, ruby,section,
  summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }
  footer, header, hgroup, menu, nav, section, article, aside, details, figcaption,
  figure {
    display: block;
  }
  body {
    line-height: 1;
  }
  html, body {
    background: #f2f3f4;
  }
  ol, ul {
    list-style: none;
  }
  blockquote, q {
    quotes: none;
  }
  q:before, q:after, blockquote:before, blockquote:after {
    content: '';
    content: none;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  a {
    text-decoration: none;
    color:#fff;
  }
`;

具体内容大家应该都能看得懂，就不解释了。

另外又建立一些全局变量：

const extendClick = () => {
  return `
    position: relative;
    &:before {
      content: '';
      position: absolute;
      top: -10px;
      botton: -10px;
      left: -10px;
      right: -10px;
    };
  `;
};

const noWrap = () => {
  return `
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  `;
};

export default {
  'theme-color': '#d44439',
  'theme-color-shadow': 'rgba(212, 68, 57, .5)',
  'font-color-light': '#f1f1f1',
  'font-color-desc': '#2e3030',
  'font-color-desc-v2': '#bba8a8',
  'font-size-ss': '10px',
  'font-size-s': '12px',
  'font-size-m': '14px',
  'font-size-l': '16px',
  'font-size-ll': '18px',
  'border-color': '#e4e4e4',
  'background-color': '#f2f3f4',
  'background-color-shadow': 'rgba(0,0,0,0.3)',
  'highlight-background-color': '#fff',
  extendClick,
  noWrap
};