With the development of front-end technology over the years, a lot of excellent technology has emerged, especially In the FIELD of CSS there are a variety of continuous attempts, such as CSS In JS In this field emerged many excellent libraries, such as: Styled – Components, Emotion, Radium, Styled – JSX….. These excellent technical libraries are constantly trying in this field, for their excellent ideas I think as an ambitious programmer is must understand learning.

Today we will learn the principles of the styled- Components, an excellent CSS library. The principle is quite simple, using the ES6 tagging template. If you are not sure, I suggest you read through this article and look at the principle below.

Base style component

// ๅŸบ็ก€็š„ๆ ทๅผ็ป„ไปถ

const BasisDiv = styled.basisDiv`
  color: pink;
`;

function App() {
  return (
    <div>
      <BasisDiv>ๅŸบ็ก€็š„ๆ ทๅผ</BasisDiv>
    </div>
  );
}
Copy the code

Click here for the full online demo

The idea here is really simple. The first one is to use the tag template. After we get the style string, we remove the leading and trailing whitespace and the extra newline, and then we end it with “; “. Cut it into an array and remove the superfluous empty strings, then transform it into a two-dimensional array of key-value pairs by Map, then convert it into a style object and assign it to the div element. This completes the simple style component.

For example, what if I want to add a click event to the component, or if I want to pass a props?

Supports Props style components

In React development, component support is essential, so let’s see how to add props and events!

const PropsDiv = styled.propsDiv` background-color: pink; `; function App() { const [count, setCount] = useState(0); Return (<div> <PropsDiv name=" Props style component "onClick={() => {console.log(" click event "); setCount((oldCount) => oldCount + 1); }} > Support props-- {count} </PropsDiv> </div>); }Copy the code

Click here for the full online demo

Supporting this capability is really easy. We just need to use destruct assignment to collect the remaining parameters and expand on the div element.

Using the full Styled components, we will find that if we want to use props to control the style of the style component, the current code does not support this, so how should we do this?

Support style changes

const FuncDiv = styled.funcDiv` color: red; background-color: ${({ backColor }) => backColor}; `; function App() { const [count, setCount] = useState(0); Return (<div> <FuncDiv backColor="pink" onClick={() => {console.log(" Click event 2"); Function </FuncDiv> </div>); }Copy the code

Click here for the full online demo

For this function we overwrite the propsDiv method, we add the funArr array, which holds the functions we wrote in the template string, and we need to pass the props to the advancedParsingStyle method. In this method we need to concatenate the string with the string returned after calling the function, and then do the conversion.

In the funcDiv method, we consider that the div element only needs to receive events, so we eliminate props, passing events to the div element, and all other props are control-style props for function calls.

conclusion

Styled components The above is the basic principle of styled- Components, using the tag template. For styled components, if you are interested, you can read the source code and learn for yourself.

Also attached is the source of this article -TS

Past wonderful

  • Interviewer: Can you talk about the difference between extends and a parasitic composite inheritance stereotype?

  • The front end Leader asked me to talk to my colleagues about the event loop

  • React compares the status update mechanism with Vue

  • Do you React to a tree shuttle box?

  • 10 Mistakes to avoid when Using React

  • Webpack Packaging Optimization Direction Guide (Theory)

  • What if VUE encounters drag-and-drop dynamically generated components?

  • JS Coding tips, most people can’t!!

  • TypeScript doesn’t it smell good? Come on!