In the documentation of styled from MUI, I came across this function signature:

styled(Component, [options])(styles) => Component

I found many examples with this syntax in the MUI demos.

It seams to me, I am lacking basic syntax knowledge, because I don't get the (styles) => Component part. I understand this is a lambda expression, but for me it's not part of the function signature, because it's not enclosed into the parenthesis.

Can someone explain, what it does and why it's different form a signature like

styled(Component, [options], (styles) => Component)

?

CodePudding user response：

styled(Component, [options])(styles) => Component

If you're not familiar with the syntax used in that part of the documentation, then the example after the description is excellent.

styled is a function which takes two arguments (Component and, optionally, options).

It returns a function.

The returned function takes one argument (styles) and returns a Component.

Your version, by contrast:

styled(Component, [options], (styles) => Component)

Here, styled is a function which takes three arguments.

• Component
• options (which is marked as optional, but can't be because the third argument isn't marked as optional)
• A function which takes one argument (styles) and returns a Component

The return value for styled is missing.