|
Answer» There are many different ways through which one can style a React component. Some of the ways are : - Inline Styling: We can DIRECTLY style an element using inline style attributes. MAKE sure the value of style is a JavaScript object:
class RandomComponent extends React.Component { render() { return ( <div> <h3 style={{ color: "Yellow" }}>This is a heading</h3> <p style={{ fontSize: "32px" }}>This is a paragraph</p> </div> ); }}- Using JavaScript object: We can CREATE a separate JavaScript object and set the desired style PROPERTIES. This object can be used as the value of the inline style attribute.
class RandomComponent extends React.Component { paragraphStyles = { color: "Red", fontSize: "32px" }; headingStyles = { color: "blue", fontSize: "48px" }; render() { return ( <div> <h3 style={this.headingStyles}>This is a heading</h3> <p style={this.paragraphStyles}>This is a paragraph</p> </div> ); }}- CSS Stylesheet: We can create a separate CSS file and write all the styles for the component inside that file. This file needs to be imported inside the component file.
import './RandomComponent.css';class RandomComponent extends React.Component { render() { return ( <div> <h3 className="heading">This is a heading</h3> <p className="paragraph">This is a paragraph</p> </div> ); }}- CSS Modules: We can create a separate CSS module and import this module inside our component. Create a file with “.module.css”‘ extension, styles.module.css:
.paragraph{ color:"red"; border:1px solid black;}We can import this file inside the component and use it: import styles from './styles.module.css';class RandomComponent extends React.Component { render() { return ( <div> <h3 className="heading">This is a heading</h3> <p className={styles.paragraph} >This is a paragraph</p> </div> ); }}
|
