反应.JS。如何在子组件上应用材质主题？

【问题标题】：React.JS. How can I apply material theme on child component?反应.JS。如何在子组件上应用材质主题？
【发布时间】：2021-04-18 00:05:28
【问题描述】：

这是我的 JSX：

<FormControl>
    <ButtonGroup className="groupedHorizontal">
        <InputLabel htmlFor="category">Category:</InputLabel>
        <Select onChange={(event) => that.handleCategoryChange(event)}  native={true}  id="category">
            <option></option>
            {catOptions}
        </Select>
        
        <BrandsPopup />
        
        <Button onClick={(e) => that.removeCategory(e)}>Del</Button>
    </ButtonGroup>
</FormControl>

BrandsPopup 是一个组件，它在<React.Fragment> 内呈现一个 material-ui 按钮。选择和“Del”按钮与ButtonGroup 元素的边界很好。问题是，BrandsPopup 没有边界，也没有作为组的一部分出现。如何在按钮上应用ButtonGroup 样式，从子组件呈现？

【问题讨论】：

标签： reactjs material-ui jsx

【解决方案1】：

ButtonGroup 使用 cloneElement 并因此将 assigns its own props 用于其子级。您应该能够将它们记录到BrandsPopup 内的控制台，然后只需将它们分配给您的按钮组件。当然，这可能与您在应用中其他地方使用 BrandsPopup 的方式有冲突。

如果BrandsPopup 确实只包含一个Button 组件，则不需要Fragment 包装器。

<ButtonGroup className="groupedHorizontal">
  <BrandsPopup />
</ButtonGroup>


const BrandsPopup = (props) => (
  <React.Fragment>
    <Button
      // these come from ButtonGroup ?
      className={props.className}
      color={props.color}
      variant={props.variant}
    >
      click me
    </Button>
  </React.Fragment>
);

【讨论】：