When you want to use a particular HTML element and define its styles using CSS classes in Reactjs and also
reuse it elsewhere, it can be helpful to be able to define it as a react component and style it in the same
file without recurring to inline styling. You can achieve this by using the styled-components library, in
this quick tips episode, you will learn how. Above is the vid and below you will find some useful notes.
- 1.
Pre-reqs
-
Have node.js installed
-
- 2.
Create the Styled Component
-
Create the app using npx create-react-app
npx create-react-app quick-tips-react-styled-components
-
Install the styled-components library
npm install --save styled-components
-
Start the app
npm start
-
Create the styled component HTML element to use by typing styled.HTML-ELEMENT. In this case, I am using an h1 (styled.h1).
import styled from "styled-components"; const Title = styled.h1` color: palevioletred; border-left: 5px palevioletred solid; padding-left: 5px; `;
-
Use the new component in the same way you would for the type of styled component that you selected (h1 in this case).
<Title> This is the styled Title </Title>
-
- 3.
Comentarios
Publicar un comentario