A detailed explanation of styled-components usage

This time to everyone to bring styled-components usage details, the use of styled-components Note what, the following is the actual case, together to see.

Styled components a new style of control programming that solves the problem of CSS global scope and removes the mapping between styles and components

Import React from ' React ', import styled from ' styled-components ', import {render} from ' React-dom '; Const Title = Styled.h1 '    font-size:1.5em;    Text-align:center;    color:palevioletred; '; Class App extends React.component {    render () {        return (            <title>hello world</title>        )    }} render (    <app/>,    document.getElementById (' App '));

STYLED.H1 is a label template function

The STYLED.H1 function returns a React Component, and styled components adds a class for the React Component that has a random string value. The value of the template string argument passed to Styled.h1 is actually a CSS syntax that is appended to the React Component class to add a style to the React Component

Second, based on props custom theme

Const Button = Styled.button '  background: ${props = props.primary? ' palevioletred ': ' White '};  Color: ${props = props.primary? ' White ': ' palevioletred '};  Font-size:1em;  Margin:1em;  Padding:0.25em 1em;  border:2px solid palevioletred;  BORDER-RADIUS:3PX, '; render (  <p>    <Button>Normal</Button>    <button primary> primary</button>  </p>);

All of the props that we pass in the component can be obtained when the component is defined, which makes it easy to customize the theme of the component. If there is no styled-components, you need to use the component style property or define multiple classes to implement the

Third, component style inheritance

Typically, in CSS, the class is defined in a space-delimited manner by passing in multiple name classes to class, similar to class= "button tomato". The use of JS inheritance in Styled-components enables the reuse of this style:

Const Button = Styled.button '  color:palevioletred;  Font-size:1em;  Margin:1em;  Padding:0.25em 1em;  border:2px solid palevioletred;  border-radius:3px; '; const Tomatobutton = Button.extend '  color:tomato;  Border-color:tomato; ';

A property in a subcomponent overrides a property of the same name in the parent component

Iv. internal use of components ClassName

There is always a need to cover the internal style of the component in daily development, you may want to use className in styled-components, or when using third-party components.

<Wrapper>  
V. Maintaining other properties in components

Styled-components also supports the passing of additional attributes for the component to the HTML element, such as specifying a type attribute for the INPUT element, which we can do with the Attrs method.

Const Password = styled.input.attrs ({  type: ' Password ',}) '  color:palevioletred;  Font-size:1em;  border:2px solid palevioletred;  border-radius:3px; ';
In real-world development, this method also has a useful place to reference the CSS style of a third-party class library:

Const Button = styled.button.attrs ({  className: ' Small ',}) '  background:black;  Color:white;  Cursor:pointer;  Margin:1em;  Padding:0.25em 1em;  border:2px solid black;  border-radius:3px; ';
The compiled HTML structure is as follows:

<button class= "Sc-gpevay small Gyllyg" >  styled components</button>
It is possible to use the small style defined elsewhere, or simply to identify the class that you define, because the class name we get under normal circumstances is unreadable encoding

VI. CSS Animation support

Styled-components also supports the @keyframe in CSS animations very well.

Import {keyframes} from ' styled-components '; const FADEIN = KeyFrames '  0% {    opacity:0;  }  100% {    opacity:1;  } '; const Fadeinbutton = Styled.button '  animation:1s ${fadein} ease-out; ';
Vii. compatible with existing react components and CSS frameworks

Another benefit of the Css-module model used by styled-components is that it can be well compatible with other subject libraries. Because most CSS frames or CSS themes are styled in a className fashion, the extra className and theme className are not too much of a conflict

The styled-components syntax also supports the extension of a React component

Const STYLEDP = styled (Row) '  position:relative;  height:100%;  . Image img {    width:100%;  }  . Content {    min-height:30em;    Overflow:auto;  }  . Content H2 {    font-size:1.8em;    Color:black;    margin-bottom:1em;  } `;
Disadvantages

You can't use Stylelint to check your CSS code.

In the process of using styled-components also encountered some problems, such as our project will use Stylelint to do the style code check, but after using the styled-compoents, there is no way to let the rules of stylelint take effect.

You can't use prettier to format your CSS code.

Now prettier can not only help you format the JS code, but also format the CSS code, but if the use of styled-components, JS string template content has no way to use the prettier format, this is also more embarrassing.

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

CSS3 mouse move into the picture dynamic prompt effect

Sticky Footer Absolute Bottom method

CSS3 makes a striped big background