Material ui 在MUI上有条件地添加样式属性

在

styled components

上，我们可以有这样的东西

import syled, { css } from 'styled-components';
const StyledButton = styled.button<StyledButtonProps>`
    display: flex;
    ${textStyles.styledButton}
    ${props =>
        props.disabled &&
        css`
            opacity: 0.5;
        `}
`

另一种情况是

样式化组件中的类似情况，如何将其应用到MUI的
样式化组件中


    ${props =>
        props.whiteButton
            ? css`
                  background-color: transparent;
                  border: none;
                  ${textStyles.styledLink}
              `
            : css`
                  &:focus {
                      background: transparent;
                      border: 1px solid ${colors.textLink};
                      color: ${colors.textLink};
                  }
              `}

我最终采用了以下方法

const useStyles = makeStyles({
    button: (props: StyledButtonProps) => ({
        display: 'flex',
        ...textStyles.button,
        ...props.disabled && { opacity: 0.5 },
    })
})

我最终采用了以下方法

const useStyles = makeStyles({
    button: (props: StyledButtonProps) => ({
        display: 'flex',
        ...textStyles.button,
        ...props.disabled && { opacity: 0.5 },
    })
})