Radio |有没有一种方法可以只使用道具而不使用样式来水平对齐图标

Question

有没有一种方法可以只使用道具而不使用样式来水平对齐图标

代码-https://codesandbox.io/s/smoosh-hill-nr230p?file=/src/App.js:113-349

好了：

export default function App() {
return (
<div className="App">
<Radio
label="I cannot be unchecked"
// How to align horizontally?
icon={() => <IconAdjustments size={18} color='red'/>}
/>
</div>
);
}

Answer 1

icon属性用于更改Radio按钮本身的图标。如果你想在标签上添加图标，你应该使用：

<Radio
label={
<>
<IconAdjustments size={14} color="red" />
I cannot be unchecked
</>
}  
/>

编辑：

到目前为止，还不清楚你到底想实现什么，所以下面是所有可能的场景。

1. 如果您想要标签中的图标=>上述解决方案
2. 如果要更改单选按钮中的图标，请执行以下操作：

• 您可以提供图标元素本身=>icon={IconAdjustments}或
• 您提供了一个react组件，该组件接受className作为属性并将其应用于返回的元素：

icon={({ className }) => (
<IconAdjustments className={className} color="red" />
)}

将size传递到tabler icon元素对您不起作用，因为大小是根据Radio按钮的size在内部计算的，并且固定的width和height应用于图标。