How to usestyled-components in ReactJS
The styled-components is a third-party package that helps us create a new Styled component based on the React element and CSS styles provided to it.
Module Installation: In order to use the styled-components you must first install it as a dependency using the following command from the command line.
npm install styled-components
Syntax: To create a styled component you can use the syntax mentioned below.
import styled from 'styled-components';
const GeeksHeading = styled.h1`
color: white;
`;
The code above will create a new component based on the h1 element and style it with the CSS properties passed to it. The content of the App.js file demonstrating the use of styled-components is mentioned below.
Javascript
// App.jsimport styled from 'styled-components';const PageDiv = styled.div` display: flex; align-items: center; justify-content: center; height: 100vh; background-image: linear-gradient( to right, #427ceb, #1dad6f);`;const GeeksHeading = styled.h1` color: white;`;const App = () => { return ( <PageDiv> <GeeksHeading>w3wiki</GeeksHeading> </PageDiv> );};export default App; |
How to use styles in ReactJS ?
React is a JavaScript front-end library that is used to build single-page applications (SPA). React apps can easily be styled by assigning the styles to the className prop.