Applying specific styles across multiple components (ReactJS)

Hi,

I’ve successfully built a feature list which contains custom Button components in ReactJS, and have built this based off of the code from the intro tutorial (ReactJS noob here)

So far I’m able to style each button individually as they all have their own block controls wrapped around them, but I’m wanting to keep some of the styles (colour, border radius etc) of each button consistent amongst all components in the list, but the text of each button unique to each button.

Any suggestions on how to achieve this? Ideally I would like to edit the overall button styles from the feature list block control

Thanks

Nothing specific to Tina here, except if you intend to offer options to the end user.
On our website, we do define colors in a global style component, and for the button component we define some variants that used the default colors.

We do also leverage the power of CSS variables in our default demo built with Next.js and Tailwind CSS. We even make it a theme, it’s not just about buttons colors.

Feel free to inspect the source code, especially the theme data file to store current options, the theme component that will update the render, and the Tailwind config..

We have an upcoming blog post on how we built this demo, stay tuned.

1 Like

Thanks mate, got this working beautifully!

Another question - how would I get the Theme options to appear in the sidebar instead of the toolbar? Wanting to avoid the modal from blocking whats being edited

Thanks

You would need to create a Screen Plugin in Fullscreen mode, like we do for the default Media Manager for instance.