4 New Theme Based React UI Toolkits and Why It’s Going To Change How You Think

  • Use something that looks like CSS, using the new template literal feature from recent ECMAScript versions
  • Create atomic-feeling React components
  • Still preserve flexibility with access to props and use them through out the template literal freely

Emotion

  • Similar to the style prop, but also has support for auto vendor-prefixing, nested selectors, and media queries.
  • Allows developers to skip the styled API abstraction and style components and elements directly.
  • The css prop also accepts a function that is called with your theme as an argument allowing developers easy access to common and customizable values.
  • Reduces boilerplate when composing components and styled with emotion.
  • Server side rendering with zero configuration.
  • Theming works out of the box.

Performance Is No Longer an Issue

Flexbox and Evergreen

The Beginning of an Idea

Theme Oriented Styling

  1. Have a theme ready in our context and available for every component (we need to know where to get the theme from)
  2. Where does the actual value for bg sit? is this the background for button? is this just one of a set of agreed-upon colors?
  3. Have an idea of what actually is a theme
const theme = {
bg: '#fff'
}
const theme = {
background: {
bg: '#fff'
}
}
const theme = {
buttons: {
one: {
background: '#fff'
}
}
}
// example fontSizes scale as an array
fontSizes: [
12, 14, 16, 20, 24, 32
]
// example colors object
colors: {
blue: '#07c',
green: '#0fa',
}
// example nested colors object
colors: {
blue: '#07c',
blues: [
'#004170',
'#006fbe',
'#2d8fd5',
'#5aa7de',
]
}
  • Order and convention. With this we know where colors go, where spaces go and so on
  • Context. With a well-known spec, we can build tools (and people did) to apply proper understanding of what React component we’re trying to theme, and to pull the right style from a theme
  • CSS-prop to theme-prop mapping. The spec determines that, for example, the sizes theme prop apply to width, height, min-width, max-width, min-height, max-height CSS props

The Road to Design Systems

Converging Concepts

Style props

<div mr="30px" width="200px"/>

Variants

<div variant="button"/>
...
variants: {
button: {
..
}
}
...
buttons: {
primary: {
..
}
}
<button variant="primary"/>

ThemeProvider

import theme from './theme'
const Index = <ThemeProvider theme={theme}>..</ThemeProvider>

Box

<Box as="button" ...>

Concerns

export const Box = styled('div', {
shouldForwardProp,
})(
{
boxSizing: 'border-box',
margin: 0,
minWidth: 0,
},
base,
variant,
space,
color,
sx,
props => props.css
)

Composition vs. Inheritance

const Button = styled.div`
...
`
export const Box = styled('div', {
shouldForwardProp,
})(
base,
variant,
space,
color,
sx,
props => props.css
)

Toolkit vs. Framwork

Rebass

Styled System

Theme UI

Chakra UI

Styling after Styling

const StyledButton = (..)<Button sx={{background: 'dark'}}>..</Button>
const Badge = forwardRef(
({ variantColor = "gray", variant = "subtle", ...props }, ref) => {
useVariantColorWarning("Badge", variantColor);
const badgeStyleProps = useBadgeStyle({ color: variantColor, variant });
return (
<Box
ref={ref}
display="inline-block"
....
const Button = styled(Box)`
...
`

Finding Themes

Conclusion

--

--

--

@jondot | Founder & CEO @ Spectral. Rust + FP + Hacking + Cracking + OSS. Previously CTO @ HiredScore, Como, Conduit.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Update Information with Object Spread

Best Practices to Avoid Memory Leaks

Harvard CS 50x — Week 1 (C)

Creating an Alexa skill with Node, AWS Lambda, Babel, Webpack, Serverless and the ASK CLI.

Multi Step Forms in Angular

Considering Vue?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Dotan Nahum

Dotan Nahum

@jondot | Founder & CEO @ Spectral. Rust + FP + Hacking + Cracking + OSS. Previously CTO @ HiredScore, Como, Conduit.

More from Medium

This Week In React #92: Remix, MDX 2, Lifetime Analysis, Story of React, Quick Start Docs…

State management in React with redux vanilla

useGet/Post React Custom hook

Add Typescript to React Package