CODEWITHSUNDEEP
reactjstypescriptmaterial-ui
Henrik Maaland
Henrik Maaland

Reputation: 230

ToggleButtonGroup react material ui

I cant seem to get the ToggleButton selected property from material ui to work on ToggleButton.

I have made a StyledToggleButton as the documentation from 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);

I am using the ToggleButtonGroup and passing ToggleButton as a child. I have looked at using MuiTheme but i did not understand how to make that work in this example.

here is the rest for reference:

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

Upvotes: 1

Views: 2708

Answers (1)

Henrik Maaland
Henrik Maaland

Reputation: 230

call it like i did, but selected: {} need to be on same tree-level as root, solution here:

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

Upvotes: 2

Related Questions