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 is free and already included in all the starter projects using Tailwind!