styled-components

README.md

Styled-Components

• basics
• styling-components
• api

Setting up with next.js and typescript

Steps deducted from official example repository:

1. install: npm install styled-components

2. install types: npm install --save-dev @types/styled-components

3. create .babelrc in project root with following content:

   {
     "presets": ["next/babel"],
     "plugins": [["styled-components", { "ssr": true }]]
   }

4. create ./pages/_document.tsx and copy & paste document.tsx from the version from repo. This enables proper handling of dynamically created CSS-Classnames for styled-components even server-side.

Theming

• import ThemeProvider: import styled, { ThemeProvider } from 'styled-components';
• Wrap content with <ThemeProvider>your react stuff here</ThemeProvider>

Usage Examples

• Simple usage: background-color: ${(props) => props.theme.backgroundColor};

• Complex example with css:

  import styled, { css } from 'styled-components';
  
  export const Button = styled.div<{ role: keyof typeof Role }>`
    font-weight: bold;
  
    ${(props) =>
      props.theme &&
      css`
        font-size: ${props.theme.typography.h1};
        color: ${props.theme.warningColor};
      `}
  `;

CenteringContainer.tsx

import styled from 'styled-components';

const CenteringContainer = styled.div<{ upDesktop: boolean }>`
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  background-color: white;
  border: solid;
  border-radius: 10px;
  padding: 5vh 5vw 0 5vw;
  width: ${(props) => (props.upDesktop ? '790px' : '95vw')};
  max-width: ${(props) => (props.upDesktop ? '790px' : '95vw')};
`;

export default CenteringContainer;

H1.tsx

import styled, { css } from 'styled-components';
import { Role, setRoleColor } from '../../styles/mainTheme';

const H1 = styled.h1<{ role: keyof typeof Role }>`
  text-align: center;

  ${(props) => setRoleColor}
`;

export default H1;

mainTheme.ts

import { css } from 'styled-components';

const mainTheme = {
  typography: {
    h1: '28px',
    h2: '21px',
    icon: '3rem',
  },
  primaryColor: '#0275b2',
  successColor: 'mediumseagreen',
  infoColor: '#0275b2',
  errorColor: 'darkred',
  backgroundColor: 'rgba(243, 234, 234, 1)',
};

export enum Role {
  success,
  info,
  error,
}

export function roleColor(role: keyof typeof Role) {
  switch (role) {
    case 'success':
      return mainTheme.successColor;
    case 'info':
      return mainTheme.infoColor;
    case 'error':
      return mainTheme.errorColor;
  }
}

export function setRoleColor(props: { role: keyof typeof Role; theme: any }) {
  console.log(props);
  if (props.role === 'success') {
    return css`
      color: ${props.theme.successColor};
    `;
  } else if (props.role === 'info') {
    return css`
      color: ${props.theme.infoColor};
    `;
  } else if (props.role === 'error') {
    return css`
      color: ${props.theme.errorColor};
    `;
  }
}

export default mainTheme;