ToggleButtonGroup реагирует на материал пользовательского интерфейса - PullRequest
Новая
       19

ToggleButtonGroup реагирует на материал пользовательского интерфейса

0 голосов
/ 27 апреля 2020

Не получается получить свойство ToggleButton selected из пользовательского интерфейса материала для работы с ToggleButton.

Я создал StyledToggleButton в качестве документации из Material Ui. 

const StyledToggleButton = withStyles({
  root: {
    fontFamily: 'Arial',
    fontSize: '14px',
    lineHeight: '20px',
    letterSpacing: '0.25',
    color: 'rgba(0, 0, 0, 0.87)',
    padding: '15px 15px',
    textTransform: 'none',
    width: '100%',
    '&$selected': { //<--this is my attempt as per documentation
      color: 'red !important',
      backgroundColor: 'red !important',
    },
    selected: {},
  },
})(ToggleButton);

Я использую ToggleButtonGroup и передаю ToggleButton как дочерний элемент. Я смотрел на использование MuiTheme, но я не понимал, как заставить это работать в этом примере.

вот остальное для справки: 

const StyledToggleButton = withStyles({
  root: {
    fontFamily: 'Arial',
    fontSize: '14px',
    lineHeight: '20px',
    letterSpacing: '0.25',
    color: 'rgba(0, 0, 0, 0.87)',
    padding: '15px 15px',
    textTransform: 'none',
    width: '100%',
    '&$selected': {
      color: 'red !important',
      backgroundColor: 'red !important',
    },
    selected: {},
  },
})(ToggleButton);

const StyledGroupButton = withStyles({
  root: {
    padding: '15px 15px',
    width: '100%',
  },
})(ToggleButtonGroup);

export default function ObjectViewCard(props) {
  const classes = useStyles();

  const [alignment, setAlignment] = React.useState('none');

  const handleChange = (
    event: React.MouseEvent<HTMLElement>,
    newAlignment: string,
  ) => {
    setAlignment(newAlignment);
  };

  const children = [
    <StyledToggleButton key={1} value="left">
      {props.leftButtonContent}
    </StyledToggleButton>,
    <StyledToggleButton key={2} value="right">
      {props.rightButtonContent}
    </StyledToggleButton>,
  ];
  return (
    <Card>
      <hr className={classes.divider}/>
      <div className={`row ${classes.rowContainer}`}>
        <div className="col-6">
          <span className={classes.header}>Velg visning</span>
        </div>
        <div className="col-6">
          <span className={classes.info}>
            <InfoOutlinedIcon className={classes.icon}/> Vis tegnforklaring
          </span>
        </div>
      </div>
      <StyledGroupButton value={alignment} exclusive onChange={handleChange}>
        {children}
      </StyledGroupButton>
    </Card>
  );
}
```

1 Ответ

0 голосов
/ 28 апреля 2020

назовите это так, как я, но выбрал: {} должен быть на том же уровне дерева, что и root, решение здесь: 

const StyledToggleButton = withStyles({
  root: {
    fontFamily: 'Arial',
    fontSize: '14px',
    lineHeight: '20px',
    letterSpacing: '0.25px',
    color: 'rgba(0, 0, 0, 0.87)',
    padding: '15px 15px',
    textTransform: 'none',
    width: '100%',
    '&$selected': {
      backgroundColor: 'rgba(33, 137, 214, 0.14)',
      color: 'rgb(26, 88, 159)',
      '&:hover': {
        backgroundColor: 'rgba(33, 137, 214, 0.14)',
        color: 'rgb(26, 88, 159)',
      },
    },
  },
  selected: {},
})(ToggleButton);
...