Styled – Components What is it? Styled – Components is a commonly used CSS in JS class library. As with all libraries of the same type, js enables functionality that native CSS does not have, such as variables, loops, functions, etc.

What are the advantages over other pretreatments? Preprocessing, such as Sass&less, solves some of the limitations of CSS, but it still requires learning new syntax, compiling it, and its complex Webpack configuration often annoys developers.

For styled components, if you have experience with Sass&less, you can quickly switch to styled components, for most of the syntax is similar, such as nesting, & inheritance, etc., and styled Componens solves the learning cost and development environment problems very well. React Stack && React Native is a good choice.

What problem was solved? ClassName writing will make the original CSS writing is very difficult to accept if the way to import CSS will lead to variable leakage into the global need to configure Webpack to make it modular and solve the above mentioned native CSS does not have the ability to speed up the rapid development of the project

Official documents www.styled-components.com/docs

Install NPM install –save Styled – Components

Webstorm requires the Styled – Component plug-in, which vscode already supports

use

Import styled from 'styled-components' const Title = styled. H1 'font-size: 1.5em; text-align: center; color: palevioletred; `; // equivalent to const Title = styled. H1 (xx) const Wrapper = styled. Section 'padding: 4em; background: papayawhip; `; render () { return ( <Wrapper> <Title>Hello styled-components</Title> </Wrapper> ) }Copy the code

At this point we can see that the console outputs a random className, which is styled- Components for us. Note: The component name must start with a larger name or it will be resolved to a normal label

Pass props

const Button = styled.button` background: ${props => props.primary ? 'palevioletred' : 'white'}; color: ${props => props.primary ? 'white' : 'palevioletred'}; font-size: 1em; margin: 1em; Padding: 0.25 em 1 em; border: 2px solid palevioletred; border-radius: 3px; ` render( <div> <Button>Normal</Button> <Button primary>Primary</Button> </div> );Copy the code

The props passed in the component can be obtained when defining the component, making it easy to customize certain styles of components

Advanced use of props to set the default value. If no value must be passed, we will give a default value (defaultProps).

Export Default Class ALbum extends React.Component {constructor (props) {super(props) this.state = {imgSrc:  props.imgSrc } } render () { const {imgSrc} = this.state return ( <Container imgSrc={imgSrc}> </Container> ) } } // Style. div 'background-size: cover; background-image: url(${props => props.imgSrc}); width: 100%; height: 300px; ImgSrc: Cover} Container. DefaultProps = {imgSrc: Cover}Copy the code

Shaping a component is very useful. You might run into something that’s already a component but you want to add styles to it. What do you do?

React-native const Link = ({className, className); children}) => ( <a className={className}> {children} </a> ) const StyledLink = styled(Link)` color: palevioletred; Render (<div> <Link> common component </Link> <StyledLink> have color? </StyledLink> </div> );Copy the code

Component style inheritance

const Button = styled.button` color: palevioletred; font-size: 1em; margin: 1em; Padding: 0.25 em 1 em; border: 2px solid palevioletred; border-radius: 3px; `; const TomatoButton = Button.extend` color: tomato; border-color: tomato; `; // TomatoButton partially inherits its style from Button. In this case, two classes are not generatedCopy the code

Changing the component label In the case of idle pain we want to change the component label such as changing the button to the A label

// Call withComponent with the Button component defined above const Link = button.withComponent ('a')Copy the code

Maintain other properties. In some cases, we may need to use a third-party library style, which we can easily achieve using this method

Const Input = style.input. Attrs ({// define the static props type: 'password', // default using 1em margin: props => props.size || '1em', padding: props => props.size || '1em' })` color: palevioletred; font-size: 1em; border: 2px solid palevioletred; border-radius: 3px; // props margin: ${props => props. padding: ${props => props.padding} ` render ( <Input size='1em'></Input> <Input size='2em'></Input> )Copy the code

Animation The animation generates a random class name without contaminating the whole world

Import {keyframes} from 'styled-components' // CSS animation const rotate360 = keyframes' from {transform: rotate(0); } to { transform: rotate(360deg); } ` const Rotate = Button.extend` animation: ${rotate360} 2s linear infinite; 'render (<Rotate> 💅 </Rotate>)Copy the code

Styled – Components solve most of the problems and increase maintainability, but it destroys the native experience. Often, we need to write more code to meet the business requirements. I hope there will be a better solution in the future.