Как создать темы для компонентов с помощью styled-components и Material-UI?

Question

Можно ли использовать Material-UI"theme" -prop с styled-компонентов с использованием TypeScript ?

Пример Код Material-UI:

const useStyles = makeStyles((theme: Theme) => ({
  root: {
    background: theme.palette.primary.main,
  },
}));

Теперь я хочу заменить этот код на styleled-компоненты.
Я безуспешно проверил следующую реализацию (и другие подобные реализации):

const Wrapper = styled.div`
  background: ${props => props.theme.palette.primary.main};
`;

Answer 1

Вы можете использовать withTheme , чтобы добавить тему в качестве реквизита.

import React from "react";
import { withTheme } from "@material-ui/core/styles";
import styled from "styled-components";

const StyledDiv = withTheme(styled.div`
  background: ${props => props.theme.palette.primary.main};
  color: ${props => props.theme.palette.primary.contrastText};
`);
export default function App() {
  return (
    <StyledDiv>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </StyledDiv>
  );
}

Для начала Аспекты TypeScript, см. Эту демонстрацию: https://codesandbox.io/s/xyh60

Это из с темой HO C части документации.

Answer 2

Я думаю, что нет намерения. Если вы предпочитаете способ написания css, то, возможно, рассмотрите этот шаблон https://material-ui.com/styles/advanced/#string

Пример:

const useStyles = makeStyles({
  root: `
    background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
    border-radius: 3px;
    font-size: 16px;
    border: 0;
    color: white;
    height: 48px;
    padding: 0 30px;
    box-shadow: 0 3px 5px 2px rgba(255, 105, 135, 0.3);
  `,
});