// You first need to install 'styled-components' from your package manager

​

import { useState } from 'react'

import styled from 'styled-components'

​

const DivContainer = styled.div`

    border-radius: .5rem;

    padding-block: .5rem;

    box-shadow: 1px 1px 5px rgba(25, 25, 25, .65);

`

​

const InputControl = styled.input`

    width: 80%;

    padding: .5rem;

    border-radius: .5rem;

    margin-inline: auto;

    background-color: ${({inputLength}) => inputLength < 1 

                                          ? 'maroon': 'transparent' };

    border: ${({inputLength}) => inputLength < 1 

                                          ? '1px solid red': 'none' };

    color: ${({inputLength}) => inputLength < 1 ? 'white': 'black' };

`

​

const userName = () => setUserName(userName)

​

const Card = () => (

  const [ userName, setUserName] = ('');

​

  // Instead of regular <div></div> Tag

  // You wrap your elements around your 'custom styled component'

  <DivContainer>

    <InputControl inputLength={userName.length} 

        value={userName} 

        onChange{handleUserName} 

        placeholder="Enter your name" />

  </DivContainer>

)

​

// With love @kouqhar

mport styled from "styled-components"

​

const Div = styled.div`

    padding: 10px;

    color: palevioletred;

`

const InheritedDiv = styled(Div)`

    border: 1px solid palevioletred;

`