We are adding support for Nextjs. Get in touch on Twitter to learn more.

Styling

Theme your site using style props.

Styling components in Reflex is as easy as adding attributes to the component, just like HTML.

<Button bg="primary" color="text" px="3" py="2">
  Button
</Button>
<P fontSize="2" fontWeight="semi">
  This is a paragraph
</P>
<Grid col="1fr 1fr" gap="2">
  <Div>First column</Div>
  <Div>Second column</Div>
</Grid>

Responsive

Define your breakpoints in your theme file:

src/@reflex/gatsby-theme-base/theme.js

export default {
  ...
  breakpoints: [`768px`, `1024px`, `1280px`],
  ...
}

Then use a pipe | for mobile-first responsive styles.

// A one column grid for mobile and two column for larger breakpoints.
<Grid col="1fr|1fr 1fr">
  <Div>First</Div>
  <Div>Second</Div>
</Grid>
// Different font sizes and colors.
<Button fontSize="sm|lg" colors="primary|secondary">
  Button
</Button>

Hover and focus

Hover, focus and other CSS pseudo-classes have equivalent style props by using a prefix. Examples: hoverBg, hoverColor, and hoverBorderColor.

<Button bg="primary" hoverBg="secondary" focusBorderWidth="1px">
  Button
</Button>

Variants

If you find yourself repeating common styles for the same components, you can abstract the styles into a variant.

Every component has support for variants. See example below:

src/@reflex/gatsby-theme-base/theme.js

export default {
  ...
  colors: {
    text: "#000",
    background: "#fff",
    primary: "#2a9d8f",
    secondary: "#e76f51",
  },
  button: {
    // All buttons.
    border: "1px solid",
    borderRadius: "sm",
    fontSize: "md",
    // Primary button.
    primary: {
      bg: "primary",
    },
    // Secondary button.
    secondary: {
      bg: "secondary",
    },
    // lg button.
    lg: {
      fontSize: "2xl",
    }
  }
}

To use variant, simply pass in values to the variant prop.

<Button variant="primary">Primary button</Button>

You can also use multiple variants.

<Button variant="primary lg">Large Primary button</Button>

Theming Presets