Блог

У меня много стилей, объявленных таким образом:

 const styles = () => ({
  filterDate: {
    flexGrow: "1 !important",
    maxWidth: "150px !important",
  },
  filterGeneralSelect: {
    flexGrow: "2 !important",
    maxWidth: "300px !important",
  },
  filterEmails: {
    flexGrow: "2 !important",
    maxWidth: "300px !important",
    width: "300px",
  },
...
...
...

  

Затем я использую:
export default withStyles(styles)(AnalyticsPage);
чтобы применить их, но я пытаюсь использовать переменную конкретно здесь:

   searchButton: {
    width: "75px !important",
    height: "40px !important",
    fontSize: 14,
    textTransform: "none !important",
    boxShadow: "none !important",
    padding: "1px !important",
    borderTopLeftRadius: "0px !important",
    borderBottomLeftRadius: "0px !important",
    backgroundColor: "#0055d9",
    "amp;:hover": {
      backgroundColor: "#013D9D !important",
      color: "white",
    },
  },
  

Я пытаюсь использовать переменную для backgroundColor и hover backgroundColor, но значение, которое мне требуется для определения того, какое значение будет использоваться для этой переменной, является реквизитом для компонента, и когда я его изменяю, он по-прежнему использует начальное значение этой переменной:

 /* Outside the component */
let buttonColors = {
  color: '',
  hoverColor: ''
}

searchButton: {
    width: "75px !important",
    height: "40px !important",
    fontSize: 14,
    textTransform: "none !important",
    boxShadow: "none !important",
    padding: "1px !important",
    borderTopLeftRadius: "0px !important",
    borderBottomLeftRadius: "0px !important",
    backgroundColor: buttonColors.color,
    "amp;:hover": {
      backgroundColor: `${buttonColors.hoverColor} !important`,
      color: "white",
    },
  },

  

И для компонента я устанавливаю значение следующим образом ->

 function AnalyticsPage(props) {
  const { classes, routes, role, ids, type } = props;

  buttonColors = getSearchButtonColorsByCompanyName(ids.appsName);
...
...
...
  

Я почти уверен, что переменная установлена с правильными значениями, но стили не обновляются, я попытался перейти к концу файла, а не к началу, но безуспешно. Кроме того, поскольку эти стили передаются для использования в разных компонентах, я попробовал дочерний компонент, используя встроенный стиль именно на той кнопке, которая мне нужна, но она тоже не работает.

 <Button
  className={classes.searchButton}
  aria-controls="customized-menu"
  aria-haspopup="true"
  variant="contained"
  color="secondary"
  onClick={(e) => handleSubmit(e)}
  style={{
    backgroundColor: `${buttonColors.color} !important`,
    "amp;:hover": {
      backgroundColor: `${buttonColors.hoverColor} !important`,
      color: "white",
    }
  }}
>
  

Я буду признателен за любую помощь, спасибо за советы!