Styled Components

Question 1

Styled Components

Answer 1

Library to style css in js

• automatic critical CSS
• no class name bugs
• easier deletion of css
• simple dynamic styling
• adapting the styling of a component based on its props or global theme
• painless maintenance
• automatic vendor prefixing

Question 2

Creating a styled component

Answer 2

import styled from ‘styled-components’

styled returns a React Component, so the name of the styled component, should also follow react convention.

const BasicTitle = styled.h1 text-align: center; text-transform: capitalize;

Under the hood, styled component passes the children prop, so it automatically renders what is inside the styled component

Question 3

How do you pass props to Styled Component?

Answer 3

In styled components we pass in the props. Prop name is up to you.

Similarly, to typical React Component we can access it in our styled component

color: ${({color}) => color && ‘red’};

Question 4

How do you extend styled component and why?

Answer 4

You can add additional styles on top of a component.

export const DefaultButton = styled.button`
  color: ${({color}) => color && 'red'};
  padding: 0.2em 2em;
  border: none;
  border-radius: 4px;
`

export const HipsterButton = styled(DefaultButton)`
    width: 400px;
    background: transparent;
    color: red;
    border: 1px solid red;
`

Question 5

How do you create more complex Components?

Answer 5

The convention is that you create a Wrapper

const Wrapper = styled.div`
  h1 {
    text-transform: capitalize;
    text-align: center;
  }

  .underline {
    width: 5rem;
    height: 0.25rem;
    background: red;
    margin: 0 auto;
  }
`

and return it in React Components JSX

Question 6

What is an alternative way, to Wrap React Components with Styled Component?

Answer 6

It’s not very convenient, because it’s harder to make code modular. index.js and styles.js files.

I should only extend Styled Components.

const ComplexTitle = ({title, className}) => {

  return (
    <div>
      <h1>{title}</h1>
      <div></div>
    </div>
  );
};

const Wrapper = styled(ComplexTitle)`
  h1 {
    text-transform: capitalize;
    text-align: center;
  }

  .underline {
    width: 5rem;
    height: 0.25rem;
    background: red;
    margin: 0 auto;
  }
`;

export default Wrapper;

Question 7

What does ‘as’ prop do to an element?

Answer 7

“as” is a polymorphic prop to dynamically swap out the element that receives the styles you wrote:

Link with Button Styles

Question 8

What is the best way to setup global style variables?

Answer 8

There are two options:

1) We can setup a css variables in a GlobalStyles.js file, which we include in our App component. Then we can refer in every styled component by css variables - var(–text-color)
2) We can setup a file with variables in standard objects, which we import to the styled components.

Usually, the 1st option is the better one, however there is one upside of the 2nd option: css variables can only store a single value. In the named export, we can for instance store a function that will create us a desired border:

const getBorder = ({width, type, color }) => ${width}px ${type} ${color}

Question 9

How can you provide theming in Styled Components?

Answer 9

1. Wrap your app in ThemeProvider
2. You can pass theme prop, to your ThemeProvider passing the JavaScript object.
3. On the component side, you can access the theme by passing a function:

color: ${(props) => props.theme.color};

Question 10

How do you add animations in styled components?

Answer 10

import {keyframes} from ‘styled-components’

const spinner = keyframes`
  to {
    transform: rotate(360deg);
  }
`

const Loading = styled.div`
  // some styles
  animation: ${spinner} 0.6s linear infinite;
`

Question 11

How can you add attributes to styled component

Answer 11

You can chain .attrs method and pass either an object or a function, that returns an object.

Object works only for the most simple examples (static attribute), if you would like to set the attribute based on props, you should use the the function, like:

const Button = styled.button.attrs((props) => {
  return {type: props.type}
})``

Question 12

Whats the purpose of css function?

Answer 12

css is a helper function that can be imported from
import styled, {css} from ‘styled-components/macro’;

allows us to generate css from template literals with interpolations, from functions based on variables.

const Button = styled.button.attrs((props) => {
  return { type: props.type || 'button'}
})`
  background: var(--primary);
  border: none;
  color: white;
  cursor: pointer;
  ${({type}) => {
     return (
       type === 'submit' &&
       css`
         display: block;
         width: 100%;
         margin-top: 1rem;
         border-radius: 0.25rem;
      `
     )
  }}
`

Question 13

What’s another way to setup style properties conditionally?

Answer 13

css function allows you to interpolate and flatten the styles conditionally, however if you would like to setup styles for a specific property.

const Wrapper = styled.div`
  p {
    color: ${({ price }) => {
      if (price > 10) return "red";
      else if (price > 5) return "yellow";
      else return "green";
    }};
  }
`;