CSS Styled-Component External di React

 Berikut contoh penggunaan styled-components external di React, file styled dipisahkan dari logika code,

File Styled.js

import styled from "styled-components";

export const StyledButtonWithProps = styled.button`

  background-color: ${(props) => (props.primary ? "blue" : "gray")};

  color: white;

  padding: 10px 20px;

  border-radius: 5px;

`;

export const StyledButton = styled.button`

  background-color: green;

  color: white;

  padding: 10px 20px;

  border-radius: 5px;

`;

File App.jsx

import React from "react";

import * as S from "./Styled";

function App() {

  return (

    <div>

      <S.StyledButton>Styled Button</S.StyledButton>

      <S.StyledButtonWithProps primary>

        Styled Button With Props

      </S.StyledButtonWithProps>

    </div>

  );

}

export default App;

Hasilnya tampak sbb: