CODEWITHSUNDEEP
reactjsmaterial-uijsx
Vasilii Shpilchin
Vasilii Shpilchin

Reputation: 73

React.JS. How can I apply material theme on child component?

This is my 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>

The BrandsPopup is a component which render a material-ui Button within <React.Fragment>. The select and the "Del" button are fine bordered as ButtonGroup elements. The problem is, BrandsPopup is not bordered and does not appear as part of the group. How to apply ButtonGroup styles on the button, rendered from the child component?

Upvotes: 1

Views: 64

Answers (1)

hotpink
hotpink

Reputation: 3226

ButtonGroup uses cloneElement and thereby assigns its own props to its children. You should be able to log them to the console inside BrandsPopup and then just need to assign them to your button component. It is, of course, possible that this conflicts with how you are using BrandsPopup elsewhere in your app.

And if BrandsPopup indeed only contains one Button component you don't need the Fragment wrapper.

<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>
);

Upvotes: 1

Related Questions