Style Object
In this approach, Style is defined in a JavaScript object and directly applied within the JSX. You can also directly write the object inside style attribute.
Syntax:
import React from 'react';
const MyComponent = () => {
const styles = {
color: 'green',
fontSize: '16px',
border: '1px solid black',
};
return (
<div style={styles}>
This component has inline styles.
</div>
);
};
export default MyComponent;
How to use Inline Styles in React ?
ReactJS is a JavaScript library that is used to build a user interface. React makes it easy to create an interactive user interface by using a component-based approach. It offers various ways to apply styles to components. One of the methods is using inline styles, where styles are defined directly within the components as JavaScript objects.
We are going to learn about the following approaches to use inline styles in React: