A few special cases of styled-components in React

For React, instead of having to change the state state until the desired result is achieved, an application will include a hierarchy of stateless components. A component is nothing but a function is different. A function consists of the result returned only depending on the internal logic and the properties passed to it. Function does not create side-effects. We do not need to care about the cumbersome states that external activities need to monitor. This is similar to the styled-component. Instead of writing common styles, using a styled-component will make it easier and more manageable for you to create your own style than writing common styles. But if not careful, there will be a few cases of bewilderment like the examples below.

We want to style a basic HTML element with the help of styled-components. This is the most basic method in the form of styled.tagname. The tagname here is any valid HTML-tag.

In the example above, we need to style the margin so that the div is centered evenly to the left and right.

In fact, a component with such style is not necessarily wrong. But what if two components have the same style? Does not matter. If a component expands, it may inherit the style. Or if you like, you can override the old style.

Next, create a MyBorderStyledDiv component that has a style shared with MyStyledDiv and adds borders. Need to subtract the width of the left and right borders to align the 2 div equally. Recalculating a bit, the two components did not matter. If you want to share styles between two components without the parent, then you can use the css-function of the styled-components.

Next, add the same background for components with and without borders. Then continue using </ MyStyledDiv /> . Cannot add background for this base component.

We are building a batch of components. Four already, plus css shared together. If you ask what does this “functional styles” look like, is it better than using generic css? I don’t know what to say, it just looks wrong.

The problem here is that there are too many styles depending on the special contexts that you want to use in the component. Is this component at the top of the page or the bottom of the page? Be careful when immersed in a large number of components this easily makes you make mistakes. And that’s right, it’s completely possible to use CSS operators in styled-components, right?

It was a relief to have removed a bunch of components. Perhaps you should not forget everything about CSS when using this styled-component.

But the story is not over yet. We have a duplicate problem in the above code. Both <MyStyledDiv /> and <MyStyledDivBorderedWhenFirst /> components have their own width. If you want to align the two equally, make sure both have the same width . Please eliminate this duplication. It is okay to use size border on both sides. We can replace it with the constants as follows:

But this is a side-effect, a side effect. It may be ok for simple cases, but if you write too many styles like the above in many types of files, you will surely encounter the trap of importing too much. Just copy and paste many times and import everything, this is probably not React-way, right. Styled-component provides a method to eliminate the above case. That is using ThemeProvider and withTheme-HOC (higher-order component).

The theme here is a Javascript Object. We define it as an attribute in the <ThemeProvider /> component. It is still possible to place it in a specific location and then import it, but it is best to only import it at least once. <ThemeProvider /> is an external component. This component will provide the theme for all React components in it. In the render tree, all children will access the theme, even with deeper levels. Thus we will encapsulate the entire hierarchy in component <ThemeProvider /> . When using themes in components, need to access them through withTheme-HOC . We will get the value needed, no side effects, and no import traps here.

Now we have a nearly complete global theme. The problem is that we are sharing a border-width for the whole theme, but initially only one component needs a border. So need to modify a bit, pushing the border into the component MyGreenStyledDivBorderedWhenFirst .

We have defined it as a React Component function with a border as a constant. Then use that const in the sub-component <C /> .

If it takes effort to avoid side-effects and repetition, then backgroundStyle and width calculations also have to do something. The theme is just a simple Javascript-object anyway, so you can put anything inside, as long as it’s not a string. Put backgroundStyle inside, then add width calculation function.

Well, it seems that the code worked, but it was more complicated than before. Why? The reason given is that you have been caught in a quagmire of abstraction, understanding simply because you want things to not be repeated and logical. So why not turn the first-of-type block into a function in the first place?

Styled-component has provided great support. They allow us to style React-way styles, but not to do everything. The code structure and components still depend on us. So it is still possible to write many components and accept side-effects, while choosing a reasonable level of code abstraction.

Demo code link here

Reference article here