是否有可能使用TypeScript将Material-UI “主题”-prop 与样式组件一起使用？
示例 Material-UI 代码：
const useStyles = makeStyles((theme: Theme) => ({
root: {
background: theme.palette.primary.main,
},
}));
现在我想用样式组件替换此代码。
我已经测试了以下实现（和其他类似的实现）但没有成功：
const Wrapper = styled.div`
background: ${props => props.theme.palette.primary.main};
`;
您可以使用withTheme将主题作为props注入。
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
这是来自文档的withTheme HOC部分。
我想要一组类似的要求（MUI、样式组件、主题和typescript）。我让它工作了，但我相信它可以更漂亮：
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;
我认为没有预期的方式。如果您更喜欢 css 的写作方式，那么可以考虑这个https://material-ui.com/styles/advanced/#string-templates
例子是
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);
`,
});