How to Style React Components
Without a doubt styling react Components helps to adhere to the concerns of styling and makes components more readable and presentable.
Styled components gives control to components that rely on JavaScript for their styling back to CSS instead of using a couple of conditional class Name. This makes our code look neat and easier to refactor.
There are four different ways of styling React Components depending with your personal preference as a developer or the complexity of the application you are building .
The different use cases for different methods of styling:
Case 1: Inline CSS.
Used when you want to add a few style properties.
Below are the basic steps for defining inline CSS:
- Change the CSS property name to its camelCase version like “background-color” to “backgroundColor”, “margin-top” to “marginTop”, etc.
2. Create an object with all the CSS properties as keys and their CSS values.
3. Assign that object to the style attribute.
Inline CSS can also be used if the styles are dependent on state or prop values.
We can also define the style object inline,
Set the state variable as shown below.
The next step is to add the inline style based on the state variable.
In the above example, there is one state variable isAdmin, so based on the value(true/false) the specific style values will be applied to an element.
Using CSS stylesheets
Case2 .When you want to style many elements the same way or your application is more , it is best to use CSS classes to keep the download size of your application small.
We use the special react class Syntax: className to apply to apply CSS classes.
We also need a CSS stylesheet. This is just a regular .css file, that we need to import:
Inside of the CSS file, we can define the classes that we need to style
Using CSS Modules
Case3: Can be used when the application is more complex.
A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. With CSS Modules, your CSS class names become similar to local variables in JavaScript.
With CSS modules, you can define stylesheets that are scoped to the component.
All we need to do is to append our stylesheet file with the word “module”. For example “Button.module.css”.
We then import the stylesheet like so:
When assigning the classes to elements, we treat the imported styles like an object, containing all the defined classes as keys.
Lets take a look at this example on how to use css modules without the naming convections classes.
Button.module.css
Another-stylesheet.css
Button.js
NB: There are no clashes from the other .button class names. The button has a red background but not red text.
4. Styled-Components.
Case 4: Used when you want to reuse your style properties in the same file.
Because styled components are a library, we need to install them before we can use them:
npm install --save styled-components- Now we can create a variable by selecting a particular html element where we store our style keys
const Div = styled.htmlElemnet`color: pink` - Then we use the name of our variable as a wrapper
<Div></Div>kind of react component
When building an application styling of your components is critical because the client is going to interact with the app and needs to have a good overall experience in terms of look and feel. Keep it simple but quite interesting. Happy Coding.
The End: Intuitive design happens when current knowledge is the same as the target knowledge
