Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow overriding props in styled #44456

Open
aqeelat opened this issue Nov 18, 2024 · 0 comments
Open

Allow overriding props in styled #44456

aqeelat opened this issue Nov 18, 2024 · 0 comments
Assignees
Labels
package: system Specific to @mui/system status: waiting for maintainer These issues haven't been looked at yet by a maintainer

Comments

@aqeelat
Copy link

aqeelat commented Nov 18, 2024

Summary

When created reusable components, it is often very helpful to pass default props to the component.
Adding props to interface MuiStyledOptions will allow the users to set these props.

Examples

One use case:
Creating a reusable outlined button with extra css.
Instead of doing:

export const FullWidthOutlinedButton = styled(Button)(({ theme }) => ({
  width: '100%',
  marginTop: theme.spacing(5),
}))

and always remembering to add the variant when using the component, we can do this:

export const FullWidthOutlinedButton = styled(Button, {props: {varient: "outlined"}})(({ theme }) => ({
  width: '100%',
  marginTop: theme.spacing(5),
}))

I know the css here is generic but the possibilities are endless

Motivation

Improving DX when creating reusable components, and minimizing human error

Search keywords: props defaults custom

@aqeelat aqeelat added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Nov 18, 2024
@zannager zannager added the package: system Specific to @mui/system label Nov 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: system Specific to @mui/system status: waiting for maintainer These issues haven't been looked at yet by a maintainer
Projects
None yet
Development

No branches or pull requests

3 participants