Home
Basics
Introduction Setting up environment First Component JSX Component lifecycle Class Based Components Function Based Components Props State Hooks useState hook useEffect hook Events Server requests CSS in React Router third party JavaScriptAdvanced
useContext hook useRef hook useReducer hook Memo useCallback hook Custom Hooks React and ReduxMiscellaneous
React Third Party Components Html templates in React React Interview QnACSS in react
React components can be styled using below method.- Inline
- External css file - global css
- CSS modules - locally scoped css
- Styled components
Inline styles
As you can see in below example, you can use style attribute and pass the java script objects inside { }
<span style={{color:'red'}}>React components</span> can be styled using inline or external css method.
External styles
External css files can be imported using syntax as mentioned below. All css rules in such file are global.
import "./stylesheet.css";
<div className='banner'>This div is styled using external css file</span>
CSS modules
This method is similar to external css. The main difference is that styles defined in modules are not global. All you need to do is create a file with extension .module.css and write css rules in this file. There are certain restrictions on such file. e.g. You can not target elements based on tags but you can target elements based on classes.
import styles from "./HomePage.module.css";
//here .banner is the class defined in module.css file.
<div className={styles.banner}>This div is styled using css module</span>
Styled Components
You will need to install below npm package.npm install styled-components
import styled from 'styled-components'
//create a styled button component
const MyButton = styled.button`
background: red;
color:white;
`
render(
<div>
<MyButton>This is a styled button</MyButton>
</div>
);
Web development and Automation testing
solutions delivered!!