How to override the styling of radio group in Base Web?

Question

I want to adjust the gap between radio, so need to update styling of radio group. What is the right way to do so?

https://codesandbox.io/s/base-web-radiogroup-forked-ib0wqu?file=/src/example.js

Answer 1

I should override on RadioGroupRoot instead of Root.

<RadioGroup
  overrides={{
    RadioGroupRoot: {
      style: {
        display: 'flex',
        alignItems: 'center',
        flexWrap: 'wrap',
        gap: '16px',
      }
    }
  >
  ...
</RadioGroup>
}}