Zen Styled

A styled-components with variants and sx props

Required: @emotion/react, @emotion/styled

You can install Zen Styled using npm or yarn:

npm i @zzen/styled

or

yarn add @zzen/styled

Usage

export const Button = styled("button")(({ theme: { palette, alpha, ...theme }, ...props }) => ({
  height: "fit-content",
  borderRadius: "50%",
  "& > svg": {
    width: "1em",
    height: "1em",
    fontSize: "inherit",
  },
  variants: [
    {
      props: { size: "medium" },
      style: {
        padding: 8,
        fontSize: theme.pxToRem(24),
      },
    },
    {
      props: { size: "large" },
      style: {
        padding: 12,
        fontSize: theme.pxToRem(28),
      },
    },
  ],
}))

theme

const theme = createTheme({
  palette: {
    light: {},
    dark: {},
  },
  borderRadius: 4,
})

function App() {
  const mode = useStore((state) => state.mode)
  return (
    <ThemeProvider theme={theme} mode={mode}>
      <Button sx={{ p: 4 }} > This is a button </Button>
    </ThemeProvider>
  )