style-components的使用

style-components是使css实现模块化的
使用：
1 安装

npm install styled-components

2 （1）全局样式
首先创建全局样式文件，以.js为后缀

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
body {
    line-height: 1;
}
`
export default GlobalStyle;

引用：在对应组件内使用<GlobalStyle/>引入即可

import  GlobalStyle from "./style.js";

ReactDOM.render(
  
    <>
      <其他组件>
      <GlobalStyle/>
    </>,
  document.getElementById('root')
);

3 样式组件

export const Nav = styled.div`
    width:960px;
    height:100%;
    padding-right:70px;
    box-sizing:border-box;
    margin:0 auto;
`

如果需要在div标签上添加属性：

export const Nav = styled.div.attrs({
    index:10
})`
    width:960px;
    height:100%;
    padding-right:70px;
    box-sizing:border-box;
    margin:0 auto;
`