Styling
Loading "Intro to Styling"
Run locally for transcripts
There are two primary ways to style React components
- Inline styles with the
style
prop - Regular CSS with the
className
prop
Before we get into those, you need to know something about element properties
and HTML attributes.
Element properties and HTML attributes
In HTML, you have elements and attributes. For example, the
div
element has a
class
attribute:<div class="my-class"></div>
In the DOM, the
div
element has a className
property:<div id="my-div" class="my-class"></div>
<script>
const myDiv = document.getElementById('my-div')
console.log(myDiv.class) // undefined
console.log(myDiv.className) // "my-class"
</script>
In JSX, you use the property name rather than the attribute name:
<div className="my-class" />
This applies to a number of other attributes as well. For example,
for
in HTML
is htmlFor
in DOM (and JSX). Others include tabindex
and readonly
(which
are, respectively, tabIndex
and readOnly
in JSX).Most differences between HTML attributes and JSX props are due to the fact that
props are a reference to "properties" not "attributes", so understanding the
difference is handy!
Inline styles
Inline styles are set differently in JSX from HTML as a result of how they are
applied to the DOM. In HTML, you'd pass a string of CSS, but you access it as an
object in the DOM:
<div id="my-div" style="margin-top: 20px; background-color: blue;"></div>
<script>
const myDiv = document.getElementById('my-div')
console.log(myDiv.style.marginTop) // "20px"
console.log(myDiv.style.backgroundColor) // "blue"
</script>
As a result, in JSX, you pass an object of CSS rather than a string:
<div style={{ marginTop: 20, backgroundColor: 'blue' }} />
This actually makes them much easier to work with. Though the style prop has
some significant limitations (like lack of media queries and pseudo-selectors),
so it's not always the best choice.
Note that in React the
{{
and }}
is actually a combination of a JSX
expression and an object expression. The same example above could be written
like so:const myStyles = {marginTop: 20, backgroundColor: 'blue'}
<div style={myStyles} />
Note also that the property names are
camelCased
rather than kebab-cased
.
This matches the style
property of DOM nodes (which is a
CSSStyleDeclaration
object).Class names
The most common mechanism for styling web applications is through the use of CSS
and class names.
As mentioned earlier, in HTML, you apply a class name to an element with the
class
attribute. In JSX, you use the className
prop:<div className="my-class" />
Then you'll load a CSS file onto the page:
<link rel="stylesheet" href="styles.css" />
And that can contain the styles for
.my-class
:.my-class {
margin-top: 20px;
background-color: blue;
}