References

Introduction to React styling

Notes

• note that both CSS approaches have to use the style prop for dynamic styles

<div className={classes.circle} style={{ fontSize: `${value * 0.01}em` }}>
   awesome circle
</div>

CSS Modules

• just import some CSS
• must be named *.module.css
• classes automatically scoped, worry free naming
• CSS bundled with component

import React, { FC, useState } from 'react'

import classes from './example.module.css'
import { Slider } from './slider'

export const Module: FC = () => {
  const [value, setValue] = useState(100)
  return (
    <div className={classes.wrapper}>
      <Slider value={value} onChange={setValue} />
      <div className={classes.circle} style={{ fontSize: `${value * 0.01}em` }}>
        awesome circle
      </div>
    </div>
  )
}

export default <Module />

CSS in JavaScript

• common pattern in React apps provided by libraries

• styled-components most popular

  • Automatic critical CSS
  • No class name bugs
  • Easier deletion of CSS
  • Simple dynamic styling
  • Painless maintenance
  • Automatic vendor prefixing

• fantastic for dynamic styling

• component fully contained in single file

• needs extension for syntax highlighting

import React, { FC, useState } from 'react'

import styled from 'styled-components'
import { Slider } from './slider'

const Wrapper = styled.div`
  min-height: 250px;
  min-width: 250px;
`
const Circle = styled.div<{ fontSize: number }>`
  align-items: center;
  background-color: dodgerblue;
  border-radius: 99999px;
  color: aliceblue;
  display: flex;
  flex-direction: column;
  font-family: Arial, Helvetica, sans-serif;
  font-size: ${(props) => props.fontSize}em;
  height: 10em;
  justify-content: center;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  width: 10em;
`

export const Styled: FC = () => {
  const [value, setValue] = useState(100)
  return (
    <Wrapper>
      <Slider value={value} onChange={setValue} />
      <Circle fontSize={value * 0.01}>awesome circle</Circle>
    </Wrapper>
  )
}

export default <Styled />