Contoh Penggunaan Styled Component di React JS

 Berikut contoh penggunaan styled component di React JS.

Program ini menggunakan lybrary styled-component, instal terlebih dahulu : npm install styled-components 

import React from "react";

import styled from "styled-components";

// Tombol dari bagian sebelumnya tanpa interpolasi

const Button = styled.button`

  color: #bf4f74;

  font-size: 1em;

  margin: 1em;

  padding: 0.25em 1em;

  border: 2px solid #bf4f74;

  border-radius: 3px;

`;

// Komponen baru berdasarkan Button, tetapi dengan beberapa penyesuaian

const GreenButton = styled(Button)`

  color: mediumseagreen;

  border-color: mediumseagreen;

`;

export default function App() {

  return (

    <>

      <Button>Normal Button</Button>

      <GreenButton>Green Button</GreenButton>

    </>

  );

}

Hasilnya akan tampak sebagai berikut :