Skip to main content

Styling

Intro​

React Bricks works with any CSS framework like Bootstrap, Tailwind, Material UI, CSS modules and it should work with any CSS-in-JS solution.

CSS in JS​

If you use a CSS-in-JS library, you need to set the useCssInJs flag to true in React Bricks configuration. For some CSS-in-JS libraries other steps may be required: see below.

Styled-Components​

Styled-components by default injects styles in the CSSOM in production: this prevents React Bricks from correctly inject styles in the content bricks.

Luckily the StyleSheetManager component, since Styled-components v5, has the disableCSSOMInjection property, which switches to the text-node injection system.

So you need to wrap React Bricks' <Admin> component in this way:

import React from 'react'
import { Admin, Editor } from 'react-bricks'
import { StyleSheetManager } from 'styled-components'

const AdminEditor: React.FC = () => {
  return (
    <StyleSheetManager disableCSSOMInjection>
      <Admin>
        <Editor />
      </Admin>
    </StyleSheetManager>
  )
}

export default AdminEditor

React Bricks UI​

We created a beautiful collection of bricks ready to use with Tailwind CSS, fully responsive and dark-mode compatible.

React Bricks UI

React Bricks UI is free and already included in all the starter projects using Tailwind!