1.打开github,找到styled-components信息
2.安装
打开命令提示符,输入:
npm install styled-components
3.全局样式创建与使用
首先,创建一个style.js,引入包:
import { createGlobalStyle } from 'styled-components';
然后,将所需要的全局样式导出即可,如下:
export const GlobalStyled = createGlobalStyle` //此处写入css样式即可 `;
样式文件已创建完毕,下一步,我们在渲染文件中引入全局样式
import { GlobalStyled } from '//此处写文件路径'
在渲染目录中,如引入一个元素样式引入全局样式文件即可,如下:
<div>
<GlobalStyled/>
</div>
4.创建元素样式
首先,创建一个style.js,引入包:
import styled from 'styled-components';
然后,创建一个div组件:
export const TestBtn = style.div.attrs({
//此处写组件属性
})`
//此处写组件样式
&.className{
//此处写,此组件中,同时class为className的组件样式
}
.className2{
//此处写,此组件下,包含class为className2的组件样式
}
#idName{
//此处写,此组件下,包含id为className2的组件样式
}
&#idName{
//此处写,此组件中,同时id为className2的组件样式
}
`;
样式文件已创建完毕,下一步,我们在渲染文件中引入全局样式
import { TestBtn } from '//此处写文件路径'
在渲染目录中,如引入一个元素样式引入全局样式文件即可,如下:
<TestBtn className="className" ></TestBtn>