Part 6 Styles in React | Module based styles in React | Inline styles in React

How to import CSS to the component? - using the import statement we can use CSS. But If we import css as shown below, then these styles are applicable to the entire project. These styles may overlap with the other component styles. -------------------------------------- import './App.css' -------------------------------------- How to apply CSS styles for a single component? - To apply the CSS to a single component, we have to create the style file with the "*.module.css". - Eg: for instead of 'AppHeader.css', we have to create the 'AppHeader.module.css' file. - We have to apply the CSS using the object way like {classes.header}. Note:- Don't write the code like className="{classes.header}" or className="classes.header" - CSS module can be used with Pure CSS or with Sass. The naming convention for CSS module is a specific name followed by a dot and module(test.module.css or test.module.scss) Writing the inline styles. style={{ backgroundColor: 'red', color: 'green', fontSize: '14px' }}