A styled helper that works like classes

[Jack-Works]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

The main reason that blocking me to adopt styled component is that I have to write things like this:

const StyledDialogActions = styled(DialogActions)(({ theme }) => ({
    [`&.${dialogActionsClasses.root}>:not(:first-of-type)`]: {
        marginLeft: theme.spacing(3),
    },
    [`&.${dialogActionsClasses.spacing}`]: {
        // some style
    }
}))

It's would be better to have an API like this:

const StyledDialogActions = styled(DialogActions)({
    root: theme => {
        "&>:not(:first-of-type)": { marginLeft: theme.spacing(3) }
    },
    spacing: { }, // some style
    extra: {} // Type Error!
})

Motivation 🔦

It's cleaner and much type-safe. Please consider this.

Here is my idea in TypeScript

import { Dialog, Theme } from '@material-ui/core'

declare function styled<T, Q extends object>(
    comp: React.ComponentType<T & { classes?: Partial<Q> }>
): (styles: Record<keyof Q, React.CSSProperties | ((theme: Theme) => React.CSSProperties)>) => React.ComponentType<T>

const StyledDialog = styled(Dialog)({
    root: {
        color: 'red',
    },
    container: (theme) => ({ marginTop: theme.spacing(1) }),
    //   Object literal may only specify known properties, and 'thisOne' does not exist in type 'Record<keyof DialogClasses, CSSProperties | ((theme: Theme) => CSSProperties)>'.
    // ts error 2345
    thisOne: {},
})

[nuanyang233]

Maybe this is better

const StyledDialog = styled(Dialog)((theme, ...props) => {
    root: {
        color: 'red',
    },
    container: {
        marginTop: props.nested ? theme.spacing(1): 0
    }
})

[vicasas]

This could have something to do with it, recently this RFC was opened to add support to the makeStyles api #26571

[mnajdova]

We try to keep the styled() API identical (or at least extending) the emotion & styled-components' signature.

[siriwatknp]

I don't think we will spend time on this. Also, it should rely on CSS (.class) to overriding the styles, otherwise the API surface will be huge which have high maintenance cost in the future.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@Jack-Works How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.