The crap written up front

Back in 2013, React came out of nowhere. But back then, we’re like, oh shit! We have separated HTML/CSS/JS, why JSX, we need to couple HTML and JS together? React created HTML in JS. In React, we know that everything is a component. So if HTML can be written in JS, why don’t we write CSS too? Isn’t that a real component?

Styled components is designed for React and is the next generation of CSS in JS solution. In the past, CSS scope has always required various configurations in Webpack, or js solutions. For styled components, you only need to import styled from ‘styled-components’; Can.

React even combines perfectly, not only from tagnames, but also from Props. So that our code has better semantics, more maintainable, more efficient. Of course, we don’t need to worry about the learning cost of it, as long as you have used CSS or SASS, it can be used immediately, because it is a kind of superset existence.

Next, I’ll step through some of the unique features I’ve enjoyed so much over the years.

An appetizer

const Button = styled.button` background: #abcdef; border-radius: 3px; border: none; color: white; `;
console.log(Button); //styled component
console.log(new Button()); // react component 

export default CustomButton extends React.component {
    render() {
        return <Button {. props} / >}}Copy the code

Styled – Components use the tagged template syntax to create components directly for us to style.

inheritance

Styled -components Are written in two ways as follows

const Button = styled.button` background: #abcdef; border-radius: 3px; border: none; color: white; `;

const OtherButton1 = styled(button)` `;
const OtherButton2 = button.extend` `; // The old method, not recommended, will be abandoned in the future
Copy the code

The first version only creates a different CSS rule, while the second version copies the base Component CSS rule and then adds a different CSS overlay. Is not recommended

There is, of course, an interesting “inheritance” of withComponent, which we can use to change the rendered tag

const Li = styled.li` color:#abcdef; `;
const A = Li.withComponent('a'); // The A tag will be rendered
Copy the code

After compiling, they will use different classnames, which is very useful if we want to use the same style, but different tags.

Style cover

The style override mentioned here mainly refers to some interaction behavior (hover, active) override. Component inheritance is also a form of coverage.

In the past, our coverage was written as follows:

const ListItem = styled.li`
  padding: 0;
  height: 48px;
  
  &.left-item-focus {
    .left-link {
       background: ${props => props.color}; } } &:hover { .left-icon { color: #9e9e9e; // 500}} ';
Copy the code

For styled, we can overwrite the style by referring to our DOM using the Styled – Components style, as follows

const Icon = styled.span` color: red; `;

const ListItem = styled.li`

    &:hover ${Icon} {
        color: green;
    }
`;
Copy the code

This is still the way we used to overwrite styles, but we reference the selector directly using the Styled component. Having such an interface makes it even more difficult to think about what className or ID you need to give the component to override. But there’s another way I like to write it.

For styled components, references to components must be styled- Components. Reacting directly will cause an error

const ListItem = styled.li` `;

const Icon = styled.span`
    color: red;
    
    ${ListItem}:hover & {// & = icon color: green; } `;
Copy the code

This code is doing the same thing, but we’ve switched gears. You can see that this code is much less intrusive. More in line with the open and closed principle, when we do not need the Icon component, we can directly delete the Icon, we do not need to look for the style related to the component in the parent component, which is not easy to cause style pollution. Suddenly feel a light in front of you, have!

Of course, this “child component references parent” capability, but also more extensive references. You can select any parent of the DOM and then style it over yourself. As follows:

const Icon = styled.span` color: red; html.ie-8 & { // fuck ie8 color: blue; } body.xxx & { color: green; } `;
Copy the code

Any parent with a class overrides the Icon style. This “child reference parent” feature is also one of my favorite features.

You can see above that we use ampersand a lot as a selector, and ampersand has another trick.

const Example = styled.li` color: red; & { color:blue; } && { color: green; } `;
Copy the code

And you can guess what this is going to render into?

<li class='sc-gzVnrw fmpfVE'></li>
Copy the code

It will eventually compile to the following class, but our am& represents a class weight which means we will end up rendering the forgive color because li is applied to the.fmpfve. FmpfVE style sheet. This feature is very useful, for example, when you use a third party component and want to override its style, we can add multiple ampersand to increase the style weight, thus overwriting the style of the third party component

Theme

Just to say one thing about Theme, how do you pass in a Theme in conjunction with a third-party component? We have a simple trick. For example, using the Material-UI, if we need to extend our own components based on it and need styles.

const ThemeProvider: React.SFC<ThemeProviderProps> = ({ themeName, children }) = > {
  const theme = themes[themeName];
  return (
    <StyledThemeProvider theme={theme}>
      <MuiThemeProvider theme={theme}>
        {React.Children.only(children)}
      </MuiThemeProvider>
    </StyledThemeProvider>
  );
};
Copy the code

We then simply wrap our component with the withTheme provided by the Styled components that we need to call to get our theme.

For styled components, the theme and material can also be used.

And that’s all of our tricks, for the styled components, don’t you love styled components after seeing so many interesting dark technologies?

Personal website www.meckodo

Github: github.com/MeCKodo