Ant Design radio component style modification

Ant Design radio component default style:

Custom styles:

Instructions:

import React, { useState } from 'react';
import type { RadioChangeEvent } from 'antd';
import { Input, Radio, Space } from 'antd';

const App: React.FC = () => {
  const [value, setValue] = useState(1);

  const onChange = (e: RadioChangeEvent) => {
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };

  return (
    <Radio.Group onChange={ 
        onChange} value={value}>
      <Space direction="vertical">
        <Radio value={1}>Option A</Radio>
        <Radio value={2}>Option B</Radio>
        <Radio value={3}>Option C</Radio>
      </Space>
    </Radio.Group>
  );
};

export default App;

Modification method:

①Remove the circle before the option

.ant-radio-inner {
    
    
    display: none;
  }

②Set the distance between each option:

.ant-space-vertical {
    
    
    gap: 4px;
  }

If it doesn't work, you can add ' !important ':

.ant-space-vertical {
    
    
    gap: 4px !important;
  }

③ Modify the font size and size of text elements

span.ant-radio + * {
    
    
    display: block;
    padding: 10px 8px;
    font-size: 12px;
    line-height: 1;
  }

④ Set the width of the option to be the same as the width of the parent element

.ant-radio-group,
  .ant-space-vertical,
  .ant-space-item,
  .ant-radio-wrapper {
    
    
    width: 100%;
  }

⑤Set the background color of selected and suspended elements

.ant-space-item:hover,
.ant-radio-wrapper-checked {
    
    
      color: #00b357;
      background: #00b35714;
      border-radius: 4px;
}

The specific style can be modified according to the actual situation ~
more operations can be found on the official website: https://ant.design/components/radio-cn