bengrunfeld

import { theme } from '../theme'

export const SubmitButton = styled.button`
  background: ${({theme}) => theme.colors.blue};
`

bengrunfeld

export const theme = {
  colors: {
    black: "#000",
    blue: "#0000FF",
  }
}

bengrunfeld

// GenericButton.styles.js
export const GenericButton = styled.button`
  width: 90%;
`

// SubmitButton.styles.js
import { GenericButton } from '../GenericButton.styles'

// This components inherits the styles of GenericButton
export const SubmitFormButton = styled(GenericButton)`

bengrunfeld

// SubmitButton.styles.js
export const SubmitFormButton = styled.button`
  background: ${({active}) => active ? "blue" : "red"};
`
// SubmitButton.jsx
import { SubmitFormButton } from './SubmitButton.styles.js'

const SubmitButton = () => <SubmitFormButton active={true}>Click me</SubmitFormButton>

bengrunfeld

import {
  PageWrapper,
  InvestorForm,
  InvetorInput,
  AddInvestorButton,
  ClearFormButton,
  NextPageButton 
} from './Page.styles.js'

const Page = () => (

bengrunfeld

import styled from 'styled-components'

export const PageWrapper = styled.div`
    display: flex;
`
export const InvestorForm = styled.div`
    width: 90%;
`
export const AddInvestorButton = styled.button`
    background: green;

bengrunfeld

// style.module.css
.pageWrapper { display: flex; }
.investorForm { width: 90%; }
.addInvestorBtn{ background: green; }
.clearFormBtn{ background: red; }
.nextPageBtn{ background: blue; }

// Page.jsx
import styles from './mystyle.module.css';

bengrunfeld

// styles.css, Line: 45
.btn { color: blue; }

const Button = () => <button className="btn">Click Me</button>

// Another developer overwrites later on in styles.css, Line: 650
.btn { color: green; }

bengrunfeld

const Page = () => (
    <div>
        <button style={{ color: "red", backgroundColor: "blue", padding: "10px", fontFamily: "Arial", margin: "30px" }}>Click Me</button>
        <button style={{ color: "yellow", backgroundColor: "green", padding: "40px", fontFamily: "Helvetica, margin: "10px" }}>And Me</button>
        <button style={{ color: "orange", backgroundColor: "purple", padding: "13px", fontFamily: "Sans Serif", margin: "50px" }}>Me Also</button>
    </div>
)

bengrunfeld

const Button = () => <button style={{ color: "red", backgroundColor: "blue", padding: "10px", fontFamily: "Arial", margin: "30px" }}>Click Me</button>