Radii delete on global level?

[tarikmiljkovic]

Hello,

what would be the right way to remove radius on all elements in theme.js?

Thank you

[lachlanjc]

radii is a property of the theme object, so you can set it to [0] or an object with values of zero. However, some components have a radius built in, such as Button, so you'll need to manually override the buttons.primary.borderRadius in your theme if you're using that component.

[hasparus]

Lachlan's answer is legit, and how I'd do it, but just for entertainment purposes, I'll show two ideas you definitely shouldn't use in production code :P

1. Cascade "border-radius: none" from html * styles.

// inside of your theme object
styles: {
  root: {
    "*": borderRadius: "none !important"
  }
}

2. Every time Theme UI applies borderRadius it tries to read a design token from radii scale. We can set theme.radii to a Proxy which pretends to be an object having "none" or 0 under any key!

Like I said, please don't do it in your codebase.