Material Ui - 带有主题和 TS 道具的样式组件

Question

我目前正在使用 makeStyles，但它很快就会被弃用，所以我很想迁移所有内容以使用样式组件，但我对如何访问组件内传入的道具和主题道具感到有些困惑同时。这是一个人为的例子；

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

const DeleteItem = withTheme(styled(ListItem)`
    & .MuiListItemText-primary {
        color: ${(props: ThemedComponentProps) => props.theme!.styles.colors.error};
    }
`)

是否也可以传入 TS 道具？我需要检查布尔值是否更改 CSS 等。例如，

interface Props {
    showDivider?: boolean
}

makeStyles 通过传入的主题和类名的道具使这变得简单明了。例如，

const useStyles = makeStyles((theme: Theme) => createStyles({
    deleteItem: (props: Props) => ({
        borderTop: props.showDivider ? `1px solid ${theme.styles.colors.border}` : '',
        '& .MuiListItemText-primary': {
            color: theme.styles.colors.error
        }
    })
}));

谢谢大家。