Borislav Hadzhiev
Tue May 03 2022·3 min read
Photo by Jamie Street
To set inline styles in React:
style
prop on the element to an object.<div style={{backgroundColor: 'salmon', color: 'white'}}>
.const App = () => { const stylesObj = { backgroundColor: 'lime', color: 'white', }; const elementWidth = 150; return ( <div> {/* 👇️ set inline styles directly */} <div style={{backgroundColor: 'salmon', color: 'white'}}> Some content </div> <br /> {/* 👇️ set inline styles using an object variable */} <div style={stylesObj}>Some content</div> <br /> {/* 👇️ set inline styles conditionally using a ternary */} <div style={{ backgroundColor: 'hi'.length === 2 ? 'violet' : 'mediumblue', color: 'hi'.length === 2 ? 'white' : 'mediumpurple', }} > Some content </div> <br /> {/* 👇️ set inline styles interpolating a variable into a string */} <div style={{ width: `${elementWidth}px`, backgroundColor: 'salmon', color: 'white', }} > Some content </div> </div> ); }; export default App;
The code sample shows multiple ways to set inline styles on an element in React.js.
The first example sets the styles directly on the element.
<div style={{backgroundColor: 'salmon', color: 'white'}}> Some content </div>
Note that multi-word properties like background-color
are camelCased when set
on the style
object.
The value of the style
property is wrapped in 2 sets of curly braces.
The second example extracts the styles object into a variable.
const App = () => { const stylesObj = { backgroundColor: 'lime', color: 'white', }; return ( <div> {/* 👇️ set inline styles using an object variable */} <div style={stylesObj}>Some content</div> </div> ); }; export default App;
You can use this approach when you have multiple elements that share the same styles.
You can also conditionally set inline styles in React using the ternary operator.
<div style={{ backgroundColor: 'hi'.length === 2 ? 'violet' : 'mediumblue', color: 'hi'.length === 2 ? 'white' : 'mediumpurple', }} > Some content </div>
The ternary operator is very similar to an if/else
statement.
The ternary operator in the example checks if the length
of the string hi
is
equal to 2
and if it is, it returns the string violet
for the
backgroundColor
property, otherwise it returns mediumblue
.
You can also interpolate expressions or variables with a string when setting inline styles.
const App = () => { const elementWidth = 150; return ( <div> {/* 👇️ set inline styles interpolating a variable into a string */} <div style={{ width: `${elementWidth}px`, backgroundColor: 'salmon', color: 'white', }} > Some content </div> </div> ); }; export default App;
We used a template literal to concatenate a string and a variable when setting styles.
The width
property of the div
element is set to 150px
.
The dollar sign and curly braces syntax allows us to use placeholders that get evaluated.
A commonly used pattern in React is to extract wrapper components with
predefined styles that render their children
prop.
function BoldText({children}) { return <span style={{fontWeight: 'bold'}}>{children}</span>; } const App = () => { return ( <div> <p> Hello <BoldText>World</BoldText> </p> </div> ); }; export default App;
This is a very simple example, but the BoldText
component sets some styles on
an element and renders its children
prop.
An alternative to writing inline styles in React is to write your styles in a
file with a .css
extension.
.bg-salmon { background-color: salmon; } .text-white { color: white; } .font-lg { font-size: 2rem; padding: 10px 10px; }
And here is how we would import and use the classes.
// 👇️ import css file import './App.css'; const App = () => { return ( <div> <p className="bg-salmon text-white font-lg">hello world</p> </div> ); }; export default App;
index.js
file.The index.js
file is the entry point of your React application, so it's always
going to be ran.
On the other hand, if you import a CSS file into a component, the CSS styles might get removed once your component unmounts.