Question

我有很多这样声明的样式：

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",
    "&: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,
    "&: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`,
    "&:hover": {
      backgroundColor: `${buttonColors.hoverColor} !important`,
      color: "white",
    }
  }}
>

感谢您的帮助！

材质用户界面-动态覆盖样式

0 个答案: