3 ways to code CSS in React

#react #css #beginners #webdev

Getting comfortable with React can be a bear. And once you're comfortable... unfortunately, there's no guarantee you know how to give your components any sort of unified styling.

CSS can become a convoluted process in React, so here are the 3 most common ways you can implement CSS:

1. STYLESHEET

The most recognizable way to implement CSS in React is a .css stylesheet. Though the easiest to navigate-- especially if you're already familiar with CSS-- it can get complicated rather quickly with a large application and be difficult to reference as the size increases.

Another potential drawback to a .css stylesheet in React is that it interacts in a very specific matter with Bootstrap/Semantic UI, and getting your CSS to override the defaults in either requires making sure you're being more specific, or using !important , which isn't always best practice.

Also, make sure where you're bringing in class from your stylesheet, make sure to use className=

2. IN-LINE STYLING

My favorite method, inline styling can be organized quite nicely as long as you pay attention to indentation and 'hamburger-style' HTML elements.

In-line styling has a few specific rules:

<label style={{
  color: '#C1BBDA', 
  fontSize: '20px', 
  fontFamily: 'shizuru'}}
>
 NAME
</label>

As you can see in this example, the 'style' code is added directly into the HTML element that exists in the JSX. Inside of the opening tag (or the main, if it's self-closing) you'll add style={{}}, where the outer set of brackets refer to JSX. Inside the brackets indicating CSS, you'll add your CSS styling, with the following rules:

a colon follows all separately, i.e. 'color:'
if the styling has multiple words, camel case will be used, rather than the traditional CSS stylesheet format. fontSize would be used in in-line styling, rather than font-size
all styling following the ':' will be encased in a string. i.e. color: '#C1BBDA' (The hex code is inside quotes)
commas are still to implemented between style, if there are multiple styles applied. See the above example, where commas exist between each applied style

3. STYLED-COMPONENTS

The final alternative to applying CSS in React is styled components. In order to use styled components, you must import them into a component:

import styled from 'styled-components'

Once imported into the component, the syntax for styled components varies slightly from the previous two examples. Outside of your component's function, you will declare an HTML element styled:

const div = styled.div`
  margin-top:40px;
  margin-bottom:20px
`

Declare a variable and set it equal to styled.${someHTMLelement}, immediately followed by an backtick. On the next lines, the indented code will look extremely similar to stylesheet CSS, with colon and semi-colon format. When you have applied all styling, the end line of the styled component should end with an backtick, as shown above.

After declaration, calling the styled component looks exactly similar to calling a imported component anywhere else in your React application. For example, to code the above styled component, we would use

<Div></Div>

to call the styled component. (Make sure to capitalize, just as with any component.)