React.JS. Как я могу применить тему материала к дочернему компоненту?

Это мой 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 - это компонент, который отображает кнопку material-ui в <React.Fragment>. Кнопки «Выбрать» и «Удалить» имеют четкую границу в виде ButtonGroup элементов. Проблема в том, что BrandsPopup не имеет границ и не отображается как часть группы. Как применить ButtonGroup стилей к кнопке, отрисованной из дочернего компонента?


reactjs material-ui jsx
person Vasilii Appcon    schedule 13.01.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

ButtonGroup использует cloneElement и поэтому назначает свои свойства своим дочерним элементам. Вы должны иметь возможность регистрировать их в консоли внутри 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>
);
person hotpink    schedule 13.01.2021