reactjs - Hur man tematiserar komponenter med styled-components och Material-UI?

Finns det en möjlighet att använda Material-UI "theme"-egenskapen med styled-components med TypeScript?

Exempel på Material-UI-kod:

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

Nu vill jag ersätta denna kod med styled-components.
Jag har testat följande implementation (och andra liknande implementationer) utan framgång:

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

Svar #1

Du kan använda withTheme för att injicera temat som en prop.

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>
  );
}

För en start på TypeScript-aspekterna, se denna demo: https://codesandbox.io/s/xyh60

Detta är från withTheme HOC-delen av dokumentationen.

Svar #2

Jag ville ha en liknande uppsättning krav (MUI, styled-components, tema och TypeScript). Jag fick det att fungera, men jag är säker på att det kan bli snyggare:

import React from "react";
import styled from "styled-components";
import { Theme, useTheme } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

const StyledCustomButton: React.FC<{
  theme: Theme;
}> = styled(({ ...props }) => <Button {...props}>Test</Button>)`
  && {
    padding-bottom: ${(props) => props.theme.spacing(2)}px;
  }
`;

const CustomButton: React.FC = () => {
  const theme: Theme = useTheme();
  return <StyledCustomButton theme={theme} />;
};

export default CustomButton;

Relaterade artiklar