需求：

modal 里面需要一个list 列表，列表有单选框，并且可以确认。

遇到的问题：自定义modal的样式，修改radio/ radio group 的样式

设计图如下：

代码：

 

  return (
    <Modal
      title="Duplicate to other organizations"
      open={isModalVisible}
      onOk={handleOk}
      onCancel={handleCancel}
      okText="Duplicate"
      cancelText="Cancel"
      okButtonProps={{
        style: {
          background: 'linear-gradient(110deg, #4729FF 45.39%, #287EFE 128.78%',
          height: '40px',
          padding: '0 16px',
        },
      }}
      cancelButtonProps={{
        style: {
          background: '#FFFFFF',
          border: '1px solid var(--main-color, #2857FE)',
          height: '40px',
          padding: '0 16px',
        },
      }}
      className={styles.modalStyle}
    >
      <Input placeholder="Search" prefix={<SearchOutlined />} onChange={handleSearch} />{' '}

      <Radio.Group
        onChange={handleRadioChange}
        value={selectedTenantId}
        style={{
          width: '100%',
          height: '500px',
          overflow: 'auto',
        }}
      >
        <List
          itemLayout="horizontal"
          dataSource={filteredListData}
          renderItem={(item) => (
            <List.Item>
              <label
                style={{
                  display: 'flex',
                  flexDirection: 'row-reverse',
                  justifyContent: 'flex-end',
                  width: '100%',
                }}
              >
                {item?.tenantName}
              </label>
              <Radio value={item?.tenantId}></Radio>
            </List.Item>
          )}
        />
      </Radio.Group>
    </Modal>
  );

自定义样式：

.modalStyle {
    overflow: hidden;
    width: 60% !important;
    :global {
        .ant-radio-wrapper .ant-radio {
            margin-left: 8px;
            margin-right: 0;
        }
        .ant-modal-header {
            display: flex;
            padding: 8px 0px;
            align-items: flex-start;
            gap: 10px;
            align-self: stretch;

            .ant-modal-title {
                color: #3B3B3B;

                font-family: Helvetica;
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
            }
        }

        .ant-modal-body {
            .ant-input-affix-wrapper {
                height: 40px;
            }
        }

        .ant-modal-content {}
    }

}