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

Posted 2023-01-05

我正在使用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>
  )

答案

此元素最初具有：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>
  )