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.