Using styled-components to implement CSS in JS

Previous words

Use JSX syntax can implement HTML in JS, using SVGR can implement SVG in JS, using styled-components can implement CSS in JS. In this way, the use of react development, has become the use of JS development, unified and convenient. This article will describe in detail the usage of styled-components

Basic usage

Installation

$ NPM Install styled-components

Using very simply, the following code snippet shows the use of styled-components in the React project, defines the Wrapper and Button two components, contains the HTML structure and the corresponding CSS style, thus removing the class mapping relationship between the style and the component

 from ' styled-components ' ; Const Wrapper = styled.section '  0  Auto;  width:300px;  Text-align:center; '; Const Button = Styled.button '  width:100px;  Color:white;  Background:skyblue, '; render (  <Wrapper>    <button>hello world</button>  < /wrapper>);

Component styles

If you want to set a style for a component, you need to use the parentheses syntax, and you need to set classname and children on the component

Const Link = ({className, children}) = (  <a classname={classname}>    {children}  < /a>)const Styledlink = styled (Link) '  color:palevioletred;  Font-weight:bold; '; render (  <div>    <link>unstyled, boring link</link>    <br/>    <styledlink>styled, exciting link</styledlink>  </div>);

　　

Extended Styles

Extended styles can be used to extend based on existing styles

Const Button = Styled.button '  color:palevioletred;  Font-size:1em;  margin:1em;   0 . 25em 1em;  border:2px solid palevioletred;  Border-radius:3px; '; Const Tomatobutton = button.extend '  color:tomato;  Border-color:tomato; '; render (  <div>    <button>normal button</button>    <tomatobutton>tomato button</tomatobutton>  </div>);

Replace label

In some cases, you can change the label on the basis of the reuse style

ConstButton =Styled.button ' Display:inline-Block;  color:palevioletred; Font-size:1em;  Margin:1em; padding:0. 25em 1em;  border:2px solid palevioletred; Border-radius:3px; ';ConstLink = Button.withcomponent ('a')ConstTomatolink =Link.extend ' Color:tomato; Border-Color:tomato; '; render (<div> <button>normal button</button> <link>normal link</link> <TomatoLink>Tom ATO link</tomatolink> </div>);

Passing properties

You can pass properties from a parent component to a subassembly through props

ConstGlassmodal = ({children, className, backgroundcolor, padding}) = = (  <wrap backgroundcolor={backgroundcolor}> <main padding={padding} classname={classname}>{Children}</Main> </Wrap>) ExportdefaultGlassmodalConstWrap =styled.section ' Background-color: ${props = Props.backgroundcolor | |Blue_dark}; 'ConstMain =styled.main ' padding: ${props= Props.padding | |'0'}; Background-color: ${opacity_light}; '

Const Styledglassmodal = styled (glassmodal) '  padding:20px 10px;  Text-align:center; '

Or, you can customize the theme based on prop

ConstButton =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 (<div> <Button>Normal</Button> <button primary>primary</button> </div>);

Attrs function

You can use the Attrs function to set other properties

ConstInput =Styled.input.attrs ({Type'Password',Margin:props = Props.size | |'1em', Padding:props= Props.size | |'1em'}) ' color:palevioletred;Border-radius:3px;margin: ${props=Props.margin}; padding: ${props=props.padding}; '; Render (<div> <input placeholder="A Small Text input"Size="1em"/> <input placeholder="A bigger text input"Size="2em"/> </div>);

Or introduce a third-party library style, such as Activeclassname

Const Button = styled.button.attrs ({  'small',}) '  background:black;  Color:white; `;

The compiled HTML structure is as follows:

class="Sc-gpevay small Gyllyg">  styled components </button>

Animation

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

 from ' styled-components ';

const rotate360 = keyframes '  from  {transform:rotate (0deg);}  to {transform:rotate (360deg);} `; Const Rotate = styled.div '  display:inline-block;  Animation: ${rotate360} 2s linear infinite; render (  <Rotate>&lt;?? &gt;</Rotate>);

Add Class Name

Sometimes, a class name is added to the element, and the style needs to be set under that class

className="test">const wrap= styled.div '  &.test{ Color:white;  } `

Or, override the component interior style

<Wrapper>  "detail" ></div></Wrapper>

Const Wrapper =& Detail {   color: #ccc;} `;

Using styled-components to implement CSS in JS