React MUI Alert中Styled Button样式不生效问题求助

你的样式未生效主要是代码里存在几个关键问题，以下是修正方案：

问题排查与修正 #

1. 样式值引号错误：在styled定义中，CSS属性值无需添加单引号（比如color: '#663C00'），引号会被识别为无效的字符串字面量，导致浏览器无法解析样式。
2. 冗余的样式嵌套：你重复使用&&选择器定义样式，若无特殊优先级需求，直接写基础样式即可；若需强制覆盖MUI默认样式，再保留&&提升优先级。
3. 未闭合的组件标签：Alert的action属性内的StyledButton标签未正确闭合，需补充完整标签结构。

修正后的代码示例 #

样式化Button的正确写法 #

import { styled } from '@mui/material/styles';
import Button from '@mui/material/Button';

const StyledButton = styled(Button)`
  font-family: 'Source Sans Pro';
  padding-bottom: 1px;
  color: #663C00;
  background-color: transparent;
  text-decoration: none;

  // 若需强制覆盖MUI默认样式，保留此优先级提升规则
  && {
    color: #663C00;
    background-color: transparent;
  }
`;

在Alert中使用StyledButton #

import Alert from '@mui/material/Alert';

<Alert
  severity="warning"
  action={
    <StyledButton href={getChargeURL()}>
      你的按钮文本
    </StyledButton>
  }
>
  这是警告提示内容
</Alert>

备选方案：使用sx属性直接定义样式 #

如果styled方式仍有问题，可直接通过MUI的sx属性在Button上写样式，更灵活：

<Alert
  severity="warning"
  action={
    <Button
      href={getChargeURL()}
      sx={{
        fontFamily: 'Source Sans Pro',
        pb: 1,
        color: '#663C00',
        backgroundColor: 'transparent',
        textDecoration: 'none',
      }}
    >
      你的按钮文本
    </Button>
  }
>
  这是警告提示内容
</Alert>

内容的提问来源于stack exchange，提问作者mattsmith5