阅读 159

react业务能力之样式依赖——styled-components

引言

通常我们在写html,想要引用样式,会import以.css为后缀的文件。但react项目是以组件构成,自然而然就会心存疑问,css是否也可以以组件的方式被引用呢?

显然是可以的,现在就让我们一起开启以模块方式组件化管理css的大门吧!

安装依赖

yarn add styled-components 或者 npm i styled-components

创建style.js文件并在其中导出styled模块

// style.js
import styled from 'styled-components';
复制代码

构造组件并写进样式

// style.js
import styled from 'styled-components';
// 注意组件名首个字母必须大写
export const Exp = styled.div`
    display: flex;
    justify-content: center;
    color: red;
`
复制代码

在App.js中导入组件并使用

import logo from './logo.svg';
import { Exp } from './style';
function App() {
    return (
        <div className="App">
            <Exp>
                Kobe
            </Exp>
        </div>
     );
}
export default App;
复制代码

效果

1.png

我们常常会使用全局样式,类似于

margin: 0;
padding: 0;
复制代码

在react的styled-components依赖中,也有全局样式组件

全局样式组件:createGlobalStyle

在style.js文件中导出全局样式模块

import { createGlobalStyle } from 'styled-components';
复制代码

构建全局组件并写进样式

这里是已经写好的样式,我们以后可以直接拿去用

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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
html, body{
    background: #f2f3f4;;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a{
    text-decoration: none;
    color: #fff;
}
`
复制代码

在App.js中导入组件并使用

import logo from './logo.svg'; 
import { Exp, GlobalStyle } from './style'; 
function App() { 
    return (
        <div className="App">
            <GlobalStyle/>
            <Exp>
                Kobe
            </Exp>
        </div>
    ); 
} 
export default App;
复制代码

样式组件的优点:

1、只会在用到它的地方使用

2、styled-components 会给我们的组件随机生成一个类名,且不会出现重复

3、不会污染全局

也太好用了叭!!

文章分类
前端
文章标签