reactjs 无法根据状态更改按钮颜色(已解决)

7nbnzgx9  于 2023-03-01  发布在  React
关注(0)|答案(1)|浏览(105)

我试图让一个按钮在禁用时改变颜色,同时在启用时设置自定义颜色。这是我现在拥有的代码:
按钮确实有蓝色文本,但即使当它被禁用时,它仍然保持蓝色。我如何使它在禁用时变灰或改变颜色?

watbbzwu

watbbzwu1#

您的样式变量中缺少引号

我在CodeSandbox上测试了以下代码。禁用按钮的行为符合您的要求:

import * as React from 'react';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';

const styles = theme => ({
  "& .saveButton": {
    '& :not(.Mui-disabled)': {
      color: "blue"
    }
  }
});

export default function ContainedButtons() {
  const [isDisabled, setIsDisabled] = React.useState(false);
  return (
    <Stack direction="row" spacing={2}>
      <Button variant="contained" disabled={isDisabled}>
        Disabled
      </Button>
      <Button onClick={()=>setIsDisabled(status => !status)} variant="contained">
        Toggle
      </Button>
    </Stack>
  );
}

相关问题