How to create a nice-looking UI with ease?
Styled-components is a library, which enables the application of CSS-in-JS concepts.
Maybe the first thought you have on your mind is 'What a terrible idea …' but despite the initial prejudice, I also found out it allows me to apply solutions not available in other approaches. Have a look at the basic features of the library'styled-components' and show a simple example of usage with React.
In the proposed solution components are created with their styles in the same file; what is more, there is no need to add classes - the library automatically assigns a unique ID to the element. As a result the problem of misspelling or duplication and overwriting is eliminated, application is easier to maintain and, in case we need to make changes or delete the styling code, it is less likely to cause unpredictable behavior of the layout. Another great feature is the dynamic styling, which can be managed with props passed to the component which trigger execution of the proper code. It allows the creation of one element that can be imported into a larger module and used as a few different variants that significantly simplify the structure of the application. Another aspect worth noting is that ‘styled-components’ tracks which components are rendered on the page and injects corresponding styles, which allows users to load only necessary code.
Setting up the environment
Install the library inside the project directory, You just need to type this line and wait a moment.
npm install --save styled-componentsAfter that you can just simply start working, but I highly recommend you to install a plug-in in your editor which provides syntax hints and coloring. If You are using VSCode try the one presented below - it works very well.
Creating component
Inside the component file import the library.
import styled from 'styled-components';Then create a constant with the name you choose and use an object styled call method corresponding to the HTML element you need. After that, you can start styling a new component.
const Button = styled.button
/* enter css here */
;Below you can see three simple components prepared as the smallest structure elements. They can be used later in different combinations in larger modules in any place in the application.
Combining them as a simple logging form is very simple: elements need to be imported and arranged into a larger component. ‘The 'Styled-components' library was re-imported as we needed to add an extra div element to the component to set the header, inputs and button together. I think you can see clearly how it is built and what connections between elements there are.
Overwriting an item
There are situations when we need to use an element with properties, which does not appear anywhere else. In cases like that, we do not have to create a special component for a certain role - we can simply extend an existing one. As you can see in the example below, the Button component was imported, used as a basic variant, but also overwritten and used independently - new properties affect only the StyledButton element defined in the Form component. If needed, we can create for example 10 different types of buttons in the component, leaving the basic one unchanged.
Dynamic styling
The last useful feature is the possibility to style components dynamically using props.
We need to import additional {css} from 'styled-components' and inside the styling, in a code block add a simple condition with code that will execute if the component receives the specified prop. In the parent component, where we import the exemplary button, its properties can be controlled by hard-coded props or using for example the state of the component, which can change as a result of user action or other conditions.
Conclusion
Based on my own experiences I can say using ‘styled-components’ library makes noticing relations between elements easier. The developing process is much simpler and faster because of code clarity and reducing the necessity to jump between files. For me, creating applications using the solutions presented above is more intuitive and convenient than the basic css approach since it simplifies many procedures and increases efficiency. This example is very simple and it may seem that using an additional library is an unnecessary complication, but believe me, when creating more extensive solutions, it is extremely helpful! However, the key to getting the most out of this library is to think through and organize your application structure logically. I encourage you to give it a try!