3 ways to code CSS in React

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 linear styling.

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

1. STYLESHEET

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

Another potential drawback to a .css stylesheet is that it interacts in a very specific matter against 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.

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:

1. a colon follows all seperately, i.e. 'color:'

2. 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

3. all styling following the ':' will be encased in a string. i.e. color: '#C1BBDA' (The hex code is inside quotes)

4. 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 acute/backtick/left quote. On the next lines, the indented code with 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 acute/backtick/left quote, 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>

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