Skip to content

Styled-Components

相关介绍

  • Styled-Components 更多使用方法
  • 我们都知道，我们从最开始学css的时候，为了避免写的样式影响到另外的地方。所以我们这样来写的。 
    body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
        sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
  • 首先给一个元素写了一个唯一id | class，然后在这个里面写对应的样式，就可以避免影响到其它地方的代码。但是，如果项目是多人协作，那就可能存在命名冲突了，所以我们想要一种技术来让整个项目起的类名都是唯一的id。避免样式冲突等问题。所以css in js (Styled-Components) 就来了。
  • 安装npm install styled-components
    • npm install styled-components
  • 第一个styled-components的css范例 
    import { injectGlobal } from 'styled-components';
// 全局css
injectGlobal`
    body {
        background-color: red;
    }
`;