• When you want to reuse your style properties in the same file then style-component are perfect.
• We can create a variable that stores style properties and then pass it to the element like style={nameOfvariable}We can also pass the styling directly style={{color: ‘pink’}}3.
• CSS ModulesA CSS Module is a CSS file in which all class names and animation names are scoped locally by default.
• Similar to css we import css file import styles ‘.
• Styled-components 💅Styled-components is a library for React and React Native that allows you to use component-level styles in your application that are written with a mixture of JavaScript and CSS – First we need to install styled-components librarynpm install styled-components –saveNow we can create a variable by selecting a particular…

@jetrubyagency: Four ways to style react components

#business #Coding #reactjs #HTML #tech #devops…

4. Four ways to style react componentsThis is the fourth part of my React tutorials. See the Intro to react.js here

There are four different options to style React components. All depend on your personal preferences and the specific complexity of your application.

If you want to add just a few style properties, then inline styling is the best option.

When you want to reuse your style properties in the same file then style-component are perfect.

When your application is more complex I recommend CSS Modules or regular CSS stylesheets.

1. CSS StylesheetSimply import css file import ‘./DottedBox.css’ so you can have a separate css file for each component.2. Inline stylingIn React, inline styles are not specified as a string. Instead they are specified with an object whose key is the camelCased version of the style name, and whose value is the styleâ€s value, usually a string.

We can create a variable that stores style properties and then pass it to the element like style={nameOfvariable}We can also pass the styling directly style={{color: ‘pink’}}3. CSS ModulesA CSS Module is a CSS file in which all class names and animation names are scoped locally by default. Great article about css modules here.

Similar to css we import css file import styles ‘./DashedBox.css’then we access to className as we access to object:local(.className)-this when you use create-react-app because of webpack configurations

.className-this if you use your own react boilerplate.