使用样式化按钮操作反应 MUI 警报

Question

如何在 React MUI 的警报操作中创建样式化按钮？它没有注册或看到我的 css 更改。我需要以某种方式传递参数吗？

反应：

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

`;

HTML:

<Alert
   severity="warning"
   action={
   <StyledButton href={getChargeURL()}>

Answer 1

它没有注册或看到我的 css

tl;dr - 语法无效

您将 css 指定为 CSSProperties 用于排队样式，直接在 JSX 中（CSSProperties 是一个字典对象，camelCased 键和字符串作为值）。

你应该删除引号(') 从样式中替换逗号(,) 与分号(;) 并且不要骆驼香烟盒它，就像您使用标准的 css 语法一样。

const StyledButton = styled(Button)`
  font-family: 'Source Sans Pro';
  padding-bottom: 1px;
  color: #663C00;
  ...and so on
`;