Styled Components

install

npm install --save styled-components

import

import styled from "styled-components";

how to use

function App() {
  return (
    <>
      <Button />
    </>
  );
}

const Button = styled.button`
  cursor: pointer;

  &:active,
  &:focus {
    outline: none;
  }
`;

use props

function App() {
  return (
    <>
    <Button success />
    <Button danger />
    </>
  );
}

const Button styled.button`
  background-color: ${props => props.danger ? "red" : "green"}
`;

use createGlobalStyle

warn!
The injectGlobal API was removed and replaced by createGlobalStyle in styled-components v4.

import styled, { createGlobalStyle } from "styled-components"

const GlobalStyles = createGlobalStyle`
  body {
    padding: 0;
    margin: 0;
  }
`;

function App () {
  return (
    <>
      <GlobalStyles />
    </>
  );
}

Mixins

import styled, { css } from "styled-components"

const awesomeCard = css`
  background-color: yellow;
  border-radius: 5px;
  padding: 20px;
`;

const Container = styled.div`
  height: 100vh;
  width: 100vh;
  ${awesomeCard}
`;

Theming

// theme.js

const theme = {
  borderGray: "#cccccc",
};

export default theme;

// App.js

import styled, { ThemeProvider } from "styled-components";
import theme from "./theme";

function App () {
  return (
    <ThemeProvider theme={theme}>
      <Example />
    </ThemeProvider>
  );
}

const Example = styled.div`
  width: 50px;
  height: 50px;
  border: 1px solid ${(props) => props.theme.borderGray};
`;