React MUI: изменение цвета группы кнопок на выбранной кнопке

#javascript #node.js #reactjs #material-ui

#javascript #node.js #reactjs #материал-пользовательский интерфейс

Вопрос:

у меня есть группа кнопок из пользовательского интерфейса Material, и код находится здесь

   const [currentProjectSelect, setCurrentProjectSelect] = useState(null);
 

Это мое состояние.

         <ButtonGroup size="small" className={classes.projectTypeButton}>
         {projectType === 'offPlatform' amp;amp; projectTypeValues.map((element, index) =>
          <Button 
            key={element.value}
            variant="contained" 
            color="primary"
            className={[classes.budgetButton, {backgroundColor: currentProjectSelect === index ? '#315FFF' : '#fff'}]}
            onClick={() => {
              if (currentProjectSelect === null){
                form.budget_type = element.value
                setCurrentProjectSelect(element.name)
              }
              else {
                setCurrentProjectSelect(null)
              }
            }
            }
          >{element.name}</Button>
        )}
      </ButtonGroup>
 

Здесь, в className, я пытаюсь реализовать логику, в которой выбранная кнопка будет иметь другой цвет фона. Это не работает. Раньше я был разработчиком react native, и та же логика использовалась для работы со стилями.

Комментарии:

1. Вам нужно использовать кнопки переключения , а не ButtonGroup.