React Styled Components

We're going to style the basic create react app with styled-components

styled-component website 

Install styled-components

Ok lets bootstrap the basic react application you get when using Create React App with npx, if you already have Create React App installed globally then you can use the command without npx.

npm i styled-components

First, import styled into the App.js module:

  import styled from 'styled-components'

 

Code 

    import React from 'react';

    import styled from 'styled-components';

    var MainTxt = styled.div`

    color: red;

    background-color: gray;

    `;

    var FPara = styled.p`

    font-family: 'Times New Roman', Times, serif;

    width: 450px;

    background-color: orange;

    padding:25px;

    `;

    function App() {

      return (

        <div>

      <MainTxt>

        This is text

      </MainTxt>

      <FPara>

        the quick rbown fox jumps over the lazy dogthe quick rbown fox jumps over the lazy dog

        the quick rbown fox jumps over the lazy dogthe quick rbown fox jumps over the lazy dog

        the quick rbown fox jumps over the lazy dogthe quick rbown fox jumps over the lazy dog

        the quick rbown fox jumps over the lazy dogthe quick rbown fox jumps over the lazy dog

        the quick rbown fox jumps over the lazy dogthe quick rbown fox jumps over the lazy dog

        the quick rbown fox jumps over the lazy dogthe quick rbown fox jumps over the lazy dog

      </FPara>

        </div>

      );

    }

    export default App;