Migration

Migrating from Styled Components

A guide on how to refactor Styled Components using Master CSS.

Overview

import styled, { css } from 'styled-components'
import styled from '@master/styled.react'
const Button = styled.a`
display: inline-block;
border-radius: 3px;
padding: 0.5rem 0;
margin: 0.5rem 1rem;
width: 11rem;
background: transparent;
${props => props.primary && css`
background: white;
color: black;
`}
`
const Button = styled.a(
'inline-block r:3 py:8 m:8|16 w:176 bg:transparent',
{ primary: 'bg:white fg:black' }
)
return (
<Button primary>Submit</Button>
)

To learn more, visit the Master CSS Styled.

© Aoyue Design LLC.