DEV Community

Cover image for The Beginner's Guide To React: Styling React Component with className and inline Styles
Bipin Rajbhar
Bipin Rajbhar

Posted on • Edited on

The Beginner's Guide To React: Styling React Component with className and inline Styles

#react #beginners #webdev

Inline Styling

To style, a React element we need to pass an object instead of a string to the style attribute.

Note: The key of an object must in camelCase and the value is usually a string.

Example

<body> <div id="root">This will be replace by React</div> <script src="https://unpkg.com/react@16.13.1/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script> <script type="text/babel"> const rootElement = document.getElementById("root"); const style = { display: "inline-block", fontFamily: "sans-serif", margin: "24px", padding: "4px 8px", backgroundColor: "#1a202c", color: "white", borderRadius: "8px" }; const element = <h1 style={style}>DEV</h1>;  ReactDOM.render(element, rootElement); </script> </body>
Enter fullscreen mode Exit fullscreen mode

Output

CSS Stylesheet

You can write your own CSS styles in a separate file, just save the file with the .css extension and add it to the head tag.

Note: But here we are using tailwindcss framework.

<body> <div id="root">This will be replace by React</div> <script src="https://unpkg.com/react@16.13.1/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script> <script type="text/babel"> const rootElement = document.getElementById("root"); const element = ( <h1 className="inline-block m-6 px-2 py-1 rounded-md font-bold text-white bg-gray-900"> DEV </h1>  ); ReactDOM.render(element, rootElement); </script> </body>
Enter fullscreen mode Exit fullscreen mode

Output

Top comments (0)