Material-UI: переопределение стилевых классов

Question

Я пытался следовать руководству MUI по переопределению стилей MUI , но вместо JSS использовал styled-components . В частности, я не смог получить первые два подхода к работе:

1. Использование className
2. Использование classes

Я убедился, что порядок впрыска в головке правильный, так что проблема не в этом. Моя проблема в том, что нужные мне классы не добавляются в DOM.

Также обратите внимание: мне удалось заставить styleled-компоненты нормально работать с 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. Я следовал этому руководству (Третий метод).

Есть идеи почему?

PS: я не хочу превращать типографику в компонент StyledTypography. Я знаю, что это работает (см. Первый пример выше). Вместо этого я хочу следовать руководству по переопределению в документах MUI.

Редактировать

Соответствующие установленные пакеты:

• "@ material-ui / core": "^ 3.9.3"
• "styled-components": "^ 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 ?