CODEWITHSUNDEEP
tailwind-cssradix-ui
user3357926
user3357926

Reputation: 1137

How to reference primary color in Radix Themes

const Header = () => {
  return (
    <header className="absolute w-full px-5 py-2">
      <nav>
        <Heading size="5">Level 1</Heading>
        <Button variant="soft">
          <HamburgerMenuIcon />
        </Button>
      </nav>
    </header>
  );
}
when run, this component will be rendered like this, enter image description here

Note that the background color of the hamburger menu icon button. How can I set the background color of the header to have the same color as the icon button?

In MUI, we can reference the primary color like color="primary". Are there similar variables in Radix Themes?

Upvotes: 0

Views: 981

Answers (1)

Andr&#233; Vidal
Andr&#233; Vidal

Reputation: 1

On Radix you don't have a background-color prop, what you can do is either set a className and declare the values on your css file or write your background color inline using style={{ values }}. It would look something like this:

<header className="absolute w-full px-5 py-2" style={{ backgroundColor: 'red' }}>

Keep in mind to use camelCase instead of the hyphen when declaring styles (such as border-color, border-radius, etc...) as JS does not allow hyphens in variable names...

On a side note I see you're using tailwind classes, why not just use bg-blue-500 on the header?

Upvotes: 0

Related Questions