Question

我试图遵循MUI guide on overriding MUI styles，但是使用样式化组件而不是 JSS 。特别是，我无法获得前两种工作方式：

使用className
使用classes

我确保头部的注射顺序正确，所以这不是问题。我的问题是我需要的类没有添加到DOM中。

另外请注意：我设法使普通的 styled-components 与 MUI 一起正常工作。即以下工作正常：

import React from 'react';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import styled from 'styled-components';
import { darken, fade } from '@material-ui/core/styles/colorManipulator';

const StyledButton = styled(Button)`
  color: ${props => props.theme.palette.primary.contrastText };
  background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
  border-radius: ${props => props.theme.shape.borderRadius}px;
  height: 48px;
  padding: 0 30px;
  box-shadow: 0 3px 5px 2px rgba(255, 105, 135, 0.3);
  &:hover {
    background: ${props => {
      return `linear-gradient(45deg, ${darken(`#fe6b8b`, 0.2)} 30%, ${darken(`#ff8e53`, 0.2)} 90%)`;
    }};
  };
  font-size: 1.2rem;
  ${props => props.theme.breakpoints.up('md')} {
    font-size: 1rem;
  }
`;

// In render: 
<StyledButton>Hello World</StyledButton>

以下内容不起作用：

styled(Typography)`
  &.my-class {
    margin-bottom: 5rem;
  }
`;

// In render:
<Typography className="my-class" component="h2" variant="h2">

Dev Tools确实显示确实添加了my-class，但是该类未添加到DOM。我遵循了this guide（第三种方法）。

知道为什么吗？

PS：我不想将印刷术变成StyledTypography组件。我知道这可行（请参见上面的第一个示例）。相反，我想遵循MUI文档中的替代指南。

修改

相关已安装的软件包：

“ @ material-ui / core”：“ ^ 3.9.3”
“样式化组件”：“ ^ 4.2.0”，

编辑2：

如果导入外部样式表，我就可以使用它：

// style.css
.my-class2 {
  margin-bottom: 3rem;
}

// index.js
import React from 'react';
import Typography from '@material-ui/core/Typography';
import './style.css';

const IndexPage = () => (
  <>
    <Typography className="my-class2" component="h2" variant="h2">
      Testing h2 (MUI)
    </Typography>
  </>
);

<Typography className="my-class2" component="h2" variant="h2">
  Testing h2 (MUI)
</Typography>

但是，我希望将其全部保留在组件中。

因此，我的问题归结为：

如何从组件内部将本地范围内的样式添加到DOM中，而不用例如 styled-components 创建新的组件标签/变量？

Material-UI：覆盖样式类

0 个答案: