将道具添加到样式化 JSS 对象/组件的更简洁/更好的方法 [Material UI、React、JSS]

如何解决将道具添加到样式化 JSS 对象/组件的更简洁/更好的方法 [Material UI、React、JSS]

是否有一种“更干净”的方法可以将道具添加到 Material UI 中的 styled() 对象？ IMO 格式/语法不是很优雅，尤其是打字稿。 Material UI 文档为添加道具提供了以下 example：

(Javascript)

const MyButton = styled(({ color,...other }) => <Button {...other} />)({
  background: (props) =>
    props.color === 'red'
      ? 'linear-gradient(45deg,#FE6B8B 30%,#FF8E53 90%)'
      : 'linear-gradient(45deg,#2196F3 30%,#21CBF3 90%)',border: 0,borderRadius: 3,BoxShadow: (props) =>
    props.color === 'red'
      ? '0 3px 5px 2px rgba(255,105,135,.3)'
      : '0 3px 5px 2px rgba(33,203,243,.3)',color: 'white',height: 48,padding: '0 30px',margin: 8,});

（打字稿）

interface MyButtonProps {
  color: 'red' | 'blue';
}

const MyButton = styled(
  ({ color,...other }: MyButtonProps & Omit<ButtonProps,keyof MyButtonProps>) => (
    <Button {...other} />
  ),)({
  background: (props: MyButtonProps) =>
    props.color === 'red'
      ? 'linear-gradient(45deg,BoxShadow: (props: MyButtonProps) =>
    props.color === 'red'
      ? '0 3px 5px 2px rgba(255,});

有没有办法写成这样：

（打字稿）

const MyButton = styled(
  (props: {
    color: string,}) => (
    <div />
  ),)(props => ({
  background: props.color === 'red' ? 'linear-gradient(45deg,#FF8E53 90%)' : 'linear-gradient(45deg,BoxShadow: props.color === 'red' ? '0 3px 5px 2px rgba(255,.3)' : '0 3px 5px 2px rgba(33,}));

我提供的“建议语法”不会多次重用 MyButtonProps 接口，并且道具对象被传递到整个对象中（类似于“主题”对象传入的方式）。>