设置RadioButtonInput用作react-admin列表上的过滤器的样式？

Question

我正在使用RadioListInput控件，该控件包装在List组件上使用的Filter组件中。它有效，但看起来有点大：

我已经尝试将其包装在Box组件中，或使用以下样式更改样式内联：style = {{{padding：10}}}似乎没有什么不同。我知道我缺少一些简单的东西。任何帮助，将不胜感激。这是我的代码：

  return (
    <Filter {...props}>
      <SearchInput source="q" alwaysOn />
      <RadioButtonGroupInput source="active" style={{padding:  alwaysOn label="" choices={[
        { id: 'true', name: 'Active' },
        { id: 'false', name: 'Inactive' },
        { id: ' ', name: 'All' },
      ]} />
    </Filter>
  )

Answer 1

此元素最初具有：padding = 0，marginTop = 8，marginBottom = 4您可以像这样设置元素的样式：https://marmelab.com/react-admin/Theming.html

const useFilterStyles = makeStyles(theme => ({
  search: {
//  border: '1px solid red',
  },
  active: {
    marginTop: 0,
    marginBottom: 0,
//  border: '1px solid red',    
  },
}))

const TestFilter = (props) => {
  const classes = useFilterStyles()

  return (
    <Filter {...props}>
      <TextInput label="Search" source="q" alwaysOn className={classes.search} />

      <RadioButtonGroupInput source="active" alwaysOn className={classes.active} label="" choices={[
        { id: 'true', name: 'Active' },
        { id: 'false', name: 'Inactive' },
        { id: ' ', name: 'All' },
        ]}
      />
    </Filter>
  )
}