React JS Designing

In this tutorial, we can learn the basics of styling and CSS of HTML code.

We can get more ideas by looking below the example. You can put this file in /src/components folder and put in /src/App.js file. Also, add myStyles.css file in component folder import it in file.

.primary { color: red; }
import React from 'react'; import './myStyles.css'; function StyleSheet () { return ( <div> <h1 className='primary'>Hi React</h1> </div> ) } export default StyleSheet;

When we run this code, we can show that 'StyleSheet' shows in the browser in red color. We can also apply then class name based on condition. like, className={props.isActive ? 'primary' : 'secondary'}. Here, isActive we take is from props and pass true or false value from the parent component. we can also take state here.

.primary { color: red; } .secondary { color: green; } .font{ font-size: 50px; }
import React from 'react'; import './myStyles.css'; function StyleSheet () { const colorClass = props.isActive ? 'primary' : 'secondary'; return ( <div> <h1 className={`${colorClass} font`}>Hi React</h1> </div> ) } export default StyleSheet;

In above example we can set colorClass as a dynamic and font class as a fixed. Now, look at the below example for in-line style.

import React from 'react'; function StyleSheet () { return ( <div> <h1 style={{fontSize : '72px'}}>Hi React</h1> </div> ) } export default StyleSheet;

In react, Inline style is not specified as a string, it is specified as an object having a key in camelCase CSS property of styling and value as a string. We can also, doing thisĀ in the below way if the style has multiple CSS.

import React from 'react'; const heading = { fontSize : '72px', color: red } function StyleSheet () { return ( <div> <h1 className={heading}>Hi React</h1> </div> ) } export default StyleSheet;

We can also apply module CSS and js based CSS.


← Previous

Next →