Restyle

https://www.restyle.dev
Admin
Restyle is a zero-config CSS-in-JS library for React that simplifies styling components with...
Tokens:2,195
Snippets:14
Trust Score:6.3
Update:1 year ago
Show doc for...
Tokens:
Raw
### restyle: Implement Dynamic Styles with Style Props

Source: https://www.restyle.dev/index

Shows how to use style resolver functions with the `styled` utility to create components that accept dynamic styles based on props. This example demonstrates creating a `Grid` component with `gridTemplateColumns` and `gridTemplateRows` props for flexible layout control.

```typescript
import { styled } from 'restyle'

interface GridStyleProps {
  gridTemplateColumns: string
  gridTemplateRows: string
}

const Grid = styled('div', (styleProps: GridStyleProps) => ({
  display: 'grid',
  gridTemplateColumns: styleProps.gridTemplateColumns,
  gridTemplateRows: styleProps.gridTemplateRows,
}))
```

--------------------------------

### Apply Responsive Styles with Restyle Media Queries

Source: https://www.restyle.dev/index

Implement responsive designs by embedding standard CSS media queries directly within the `css` prop. Additionally, leverage the `media` utility from Restyle to create type-safe and more readable media query keys from objects.

```TypeScript
/** @jsxImportSource restyle */

export default function MediaQueries() {
  return (
    <h1
      css={{
        fontSize: '2rem',
        '@media screen and (min-width: 40em)': {
          fontSize: '3.5rem',
        },
      }}
    >
      Resize the window
    </h1>
  )
}
```

```TypeScript
/** @jsxImportSource restyle */
import { media } from 'restyle'

export default function MediaQueries() {
  return (
    <h1
      css={{
        fontSize: '2rem',
        [media({ screen: true, minWidth: '40em' })]: {
          fontSize: '3.5rem',
        },
      }}
    >
      Resize the window
    </h1>
  )
}
```

--------------------------------

### Configure Restyle Pragma and Use CSS Prop for Direct Styling

Source: https://www.restyle.dev/index

Learn to configure the `jsxImportSource` pragma in `tsconfig.json` or at the file level to enable the `css` prop. This allows direct styling of elements, with Restyle automatically applying class names and injecting necessary style tags.

```JSON
{
  "compilerOptions": {
    "jsxImportSource": "restyle"
  }
}
```

```TypeScript
export default function CSSProp() {
  return (
    <div
      css={{
        padding: '1rem',
        backgroundColor: 'peachpuff',
      }}
    >
      Hello World
    </div>
  )
}
```

```TypeScript
/** @jsxImportSource restyle */

export default function CSSProp() {
  return (
    <div
      css={{
        padding: '1rem',
        backgroundColor: 'peachpuff',
      }}
    >
      Hello World
    </div>
  )
}
```

--------------------------------

### restyle React Component Styling Input and Output

Source: https://www.restyle.dev/index

Demonstrates how to use `restyle` to style a React button component. It shows the input JSX with `styled` and `css` props, and the resulting HTML output with atomic CSS classes and injected style tags, illustrating the transformation process.

```jsx
import { styled } from 'restyle'

const Button = styled('button', {
  padding: '0.5rem 1rem',
  borderRadius: '4px',
  backgroundColor: 'blue',
  color: 'white',
})

export default function Page() {
  return (
    <Button
      css={{
        paddingInline: '0.8rem',
        backgroundColor: 'pink',
      }}
      onClick={() => alert()}
    >
      Click me!
    </Button>
  )
}
```

```html
<html>
  <head>
    <style data-precedence="rsl" data-href="xwci5pk">
      .x6vw34k {
        padding: 0.5rem 1rem;
      }
      .x1xg4490 {
        border-radius: 4px;
      }
    </style>
    <style data-precedence="rsm" data-href="x1pc7fh0">
      .x1f9e8ue {
        padding-inline: 0.8rem;
      }
    </style>
    <style data-precedence="rsh" data-href="xbg6jus">
      .x1yju78o {
        background-color: pink;
      }
      .xpzun7g {
        color: white;
      }
    </style>
  </head>
  <body>
    <button class="x6vw34k x1xg4490 x1yju78o xpzun7g x1f9e8ue">
      Click me!
    </button>
  </body>
</html>
```

--------------------------------

### restyle: Create Styled Components with `styled` Function

Source: https://www.restyle.dev/index

Illustrates the usage of the `styled` utility to create a styled React component. It takes an HTML element tag name or a component that accepts a `className` prop, along with an initial styles object, returning a styled component that can accept a `css` prop.

```jsx
import Link from 'next/link'
import { styled } from 'restyle'

const StyledLink = styled(Link, {
  color: 'rebeccapurple',
  textDecoration: 'none',
})
```

--------------------------------

### restyle: Use Styled Component with Dynamic Style Props

Source: https://www.restyle.dev/index

Demonstrates how to use the `Grid` component defined with style props, passing dynamic values for `gridTemplateColumns` to control its layout. This highlights how style props enable flexible and reusable component styling.

```jsx
<Grid gridTemplateColumns="repeat(3, 1fr)">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</Grid>
```

--------------------------------

### Create Component Variants with Restyle Styled Props Pattern

Source: https://www.restyle.dev/index

Achieve component variants by leveraging the style props pattern with Restyle's `styled` utility. This allows components to accept a prop (e.g., `variant`) and apply different styles dynamically based on its value, promoting reusable and adaptable UI components.

```TypeScript
import { styled, type CSSObject } from 'restyle'

type AlertVariant = 'note' | 'success' | 'warning'

const variantStyles = {
  note: {
    backgroundColor: '#1b487d',
    borderLeftColor: '#82aaff',
  },
  success: {
    backgroundColor: '#2b7b3d',
    borderLeftColor: '#5bc873',
  },
  warning: {
    backgroundColor: '#b36b00',
    borderLeftColor: '#ffb830',
  },
} satisfies Record<AlertVariant, CSSObject>

export const Alert = styled('div', (props: { variant: AlertVariant }) => {
  return {
    padding: '1.5rem 2rem',
    borderRadius: '0.5rem',
    color: 'white',
    ...variantStyles[props.variant],
  }
})
```

--------------------------------

### restyle: Generate Class Names and Style Tags with `css` Function

Source: https://www.restyle.dev/index

Illustrates the `css` function, which returns a tuple containing class names and a `Styles` component. This allows for manual application of styles to an element via class names and explicit injection of the corresponding style tags into the document head.

```jsx
import React from 'react'
import { css } from 'restyle'

export default function BasicUsage() {
  const [classNames, Styles] = css({
    padding: '1rem',
    backgroundColor: 'peachpuff',
  })

  return (
    <>
      <div className={classNames}>Hello World</div>
      <Styles />
    </>
  )
}
```

--------------------------------

### Implement Dynamic Theming with Restyle GlobalStyles and CSS Variables

Source: https://www.restyle.dev/index

Define CSS variable-based themes using the `GlobalStyles` component, supporting features like dark mode preferences. These variables can then be consumed by `styled` components, allowing for a flexible and maintainable theming system across your application.

```TypeScript
import { GlobalStyles, styled } from 'restyle'

const Container = styled('div', {
  backgroundColor: 'var(--background)',
  color: 'var(--foreground)',
  minHeight: '100vh',
  display: 'grid',
  placeItems: 'center',
})

const Button = styled('button', {
  padding: '0.5rem 1rem',
  borderRadius: '0.1rem',
  backgroundColor: 'var(--button-background)',
  color: 'var(--button-foreground)',
  border: 'none',
  cursor: 'pointer',
})

export default function App() {
  return (
    <>
      <GlobalStyles>
        {{
          ':root': {
            '--background': '#ffffff',
            '--foreground': '#000000',
            '--button-background': '#007bff',
            '--button-foreground': '#ffffff',
          },
          '@media (prefers-color-scheme: dark)': {
            ':root': {
              '--background': '#000000',
              '--foreground': '#ffffff',
              '--button-background': '#1a73e8',
              '--button-foreground': '#ffffff',
            },
          },
        }}
      </GlobalStyles>
      <Container>
        <Button>Themed Button</Button>
      </Container>
    </>
  )
}
```

--------------------------------

### Create CSS Animations with Restyle Keyframes Utility

Source: https://www.restyle.dev/index

Utilize the `keyframes` utility to define reusable CSS animations. These keyframes can then be applied to `styled` components, enabling smooth transitions and dynamic visual effects within your application.

```TypeScript
import { keyframes, styled } from 'restyle'

const FadeInKeyframes = keyframes({
  from: { opacity: 0 },
  to: { opacity: 1 },
})

const FadeIn = styled('div', {
  animation: `${FadeInKeyframes} 1s ease-in-out`,
})

export default function FadeInComponent() {
  return (
    <>
      <FadeInKeyframes />
      <FadeIn>Hello World</FadeIn>
    </>
  )
}
```

--------------------------------

### Inject Global Styles with Restyle GlobalStyles Component

Source: https://www.restyle.dev/index

Use the `GlobalStyles` component to inject application-wide CSS rules into the document's head. This is ideal for setting base styles for elements like `body` or headings, with styles applied based on their order and rendering in the React tree. Note that styles are not automatically removed on unmount.

```TypeScript
import { GlobalStyles } from 'restyle'

export default function Layout({ children }) {
  return (
    <>
      <GlobalStyles>
        {{
          body: {
            margin: 0,
            padding: 0,
            fontFamily: 'sans-serif',
          },
        }}
      </GlobalStyles>
      {children}
    </>
  )
}
```

--------------------------------

### Apply Hover Effect with restyle.js Pseudo Selector

Source: https://www.restyle.dev/index

This snippet demonstrates how to use the ':hover' pseudo selector within restyle.js to change an element's opacity on mouse hover. It shows direct CSS-in-JS styling applied to a div element. The component exports a simple functional React component.

```jsx
/** @jsxImportSource restyle */

export default function Hover() {
  return (
    <div
      css={{
        ':hover': {
          opacity: 0.8,
        },
      }}
    >
      Hover me
    </div>
  )
}
```

--------------------------------

### Style Child Elements with restyle.js Child Selector

Source: https://www.restyle.dev/index

This snippet illustrates the use of the child selector '>' in restyle.js to apply styles specifically to direct child elements. It sets a default color for the parent div and a different color for its direct '<a>' child. The component exports a simple functional React component.

```jsx
/** @jsxImportSource restyle */

export default function ChildSelectors() {
  return (
    <div
      css={{
        color: 'black',
        '> a': {
          color: 'tomato',
        },
      }}
    >
      Parent
      <a href="#">Link</a>
    </div>
  )
}
```

--------------------------------

### restyle: Access Component Props in Style Resolver Function

Source: https://www.restyle.dev/index

Explains how to access non-style props passed directly to a component within the style resolver function. This is useful for applying styles based on component-specific props, such as dynamically adjusting opacity based on a `disabled` prop.

```typescript
import { styled } from 'restyle'

interface ButtonStyleProps {
  backgroundColor: string
  color: string
}

const Button = styled('button', (styleProps: ButtonStyleProps, props) => ({
  backgroundColor: styleProps.backgroundColor,
  color: styleProps.color,
  opacity: props.disabled ? 0.6 : 1,
}))
```
Tokens:
Raw