In our React Inline CSS Styling Examples post we have explained how to use inline CSS with React to create a beautiful interface of our apps. We are using few inline CSS changes to control elements. With React we will break elements into small pieces to give our project an edge and will reuse the elements.
In our front-end projects the inline DOM styles are stored in style=”property:value” attribute of a target element. However, it’s different while working with React when we have to use inline styling. In our this project we are working on a user profile card component to give you a clear idea on how to use it in a real-world project
Inline styles in JSX
Let’s start with inline styles.
We use inline CSS to style a single HTML element. The CSS classes are very useful for identical styled elements specially when there are more than one element with the same style it’s better to use CSS classes.
Inline-styles are regular HTML feature they are not reacting.
<p style="color: orange">Laramatic</p>While in React we would not pass a string with the attribute styles but we have to assign an object instead:
render() {
return (
<p style={{color: 'orange'}}>
Laramatic
</p>
);
}The outer brace in this code piece represents JavaScript JSX syntax while the inner brace represents an inline new object. Not just the style object inline we can easily define the object of our code which store their properties.
render() {
const styles = {
color: 'green'
}
return (
<p style={styles}>
Example Text
</p>
);
}Applying Inline Styles Conditionally
We can also apply or remove styles while using inline styles according to the component’s state. By using ternary operator we can also include conditional styles.
class App extends Component {
constructor() {
super()
this.state = { isOrange: true }
}
render() {
const isOrange = this.state.isOrange
return <p style={{ color: isOrange ? 'red' : 'blue' }}>Example Text</p>
}
}Inline Styles
While using the inline styles in React we will use style attribute that accepts a JavaScript object having camelCase properties. So you can see achieving the same results work differently.
function MyComponent(){
return <div style={{ color: 'green', lineHeight : 15, padding: 25 }}> Inline Styled Component</div>
}In React there is no unit for padding value added while a ‘px’ suffix appends the numeric inine style properties. If we have to use other units like ‘rem’ or ’em’ and specify the string value as that applied to padding its properties should become: ‘1.5em’ in padding accordingly. We need to add vendor-prefixes manually as they would not process automatically here.
MyComponent Readability
If we use a lot of styles it might get messy it will reduce MyComponent readability. You can see below we can easily extract the styles of of component as they are just objects.
const myComponentStyle = {
color: 'blue',
lineHeight: 15,
padding: '1.5em',
}
function MyComponent(){
return <div style={myComponentStyle}> Inline Styled Component</div>
}Using Property Names in camelCase
We know that inline CSS is simply written in JavaScript objects so the properties for two different names like background-color we need to use camel case syntax. See the example here:
class MyHeader extends React.Component {
render() {
return (
<div>
<h1 style={{backgroundColor: "darkblue"}}>Inline CSS React!</h1>
<p>Let's Make Our Cascading Style Sheet!</p>
</div>
);
}Please note we must use backgroundColor as a single word not background-color. So that was all for using inline CSS with React components for our projects.
