React business capabilities have style dependencies — styled components

The introduction

Usually when you’re writing HTML, and you want to reference styles, you import files with the.css suffix. But the React project is built as a component, so it’s natural to wonder if CSS can also be referenced as a component.

Obviously it can, so let’s open the door to modular componentized CSS management.

Install dependencies

Yarn add Styled – Components or NPM I styled- Components

Create the style.js file from which you export the Styled module

// style.js
import styled from 'styled-components';
Copy the code

Construct the component and write it into the style

// style.js
import styled from 'styled-components';
// Note that the component name must begin with a capital letter
export const Exp = styled.div` display: flex; justify-content: center; color: red; `
Copy the code

Import the component in app.js and use it

import logo from './logo.svg';
import { Exp } from './style';
function App() {
    return (
        <div className="App">
            <Exp>
                Kobe
            </Exp>
        </div>
     );
}
export default App;
Copy the code

The effect

We often use a global style, something like that

margin: 0;
padding: 0;
Copy the code

In the Gravitation-Components dependency of React, there is also a global style component

Global style component: createGlobalStyle

Export the global style module in the style.js file

import { createGlobalStyle } from 'styled-components';
Copy the code

Build the global component and write it into the style

Here is the style that has been written, and we can use it directly in the future

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;
}
`
Copy the code

Import the component in app.js and use it

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

Advantages of style components:

1. Only use it where it is needed

Styled – Components will randomly generate a class name for our component and will not repeat

3, will not pollute the overall situation

It’s so easy to use!