Reflex
  • Blocks
    • Header
    • Hero
    • Features
    • Call to action
    • Forms
    • Pricing
    • Team
    • Testimonials
    • Cards
    • Footer
    • Posts
    • Videos
  • Examples
  • Learn
  • Videos
  • Docs
  • Theme

    Theme reference

    • Colors
    • Font family
    • Font size
    • Font weight
    • Line height
    • Box shadow
    Create a theme Extend base
arshadcnv0.5.3
Reflex
Reflex

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>
ThemingPresets

© 2020 Reflex

  • Blocks
  • Examples
  • Learn
  • Docs
  • Github