Feature request: exported internal styles
See original GitHub issue- I have searched the issues of this repository and believe that this is not a duplicate.
Current Behavior/Context
As far as I’m aware (and I could be wrong), there is no way to get to the internal styles object of a component. For example, for <Input>s, I’d like to grab the underline class and use it in an external custom component.
Desired Behavior/Proposal
I’d like to propose that the styles object/function become a property on the component class so that it is available externally.
For example:
const styles = theme => {/* ... */};
class Input extends React.Component {
// ...
}
Input.styles = styles;
Concerns
Exporting the styles of a component technically means that changing the style object is a breaking change. Maybe instead of Input.__styles could be used instead of Input.styles to let devs know it might lead to breaking changes if you didn’t want to be strict about it.
Let me know what you guys think. I’d like to use the internal styles over copying and pasting.
Thanks for the great library!
Issue Analytics
- State:
- Created 5 years ago
- Reactions:1
- Comments:10 (7 by maintainers)

Top Related StackOverflow Question
@ricokahler Always try to include a specific use case. While it’s tempting to just look into the source and say what you want it makes it very difficult for us to find a good solution.
If somebody can provide a concrete use case I’m happy to reopen. I’m closing until then since the author has no use for this anymore.
@artalar The style was moved. You can find it here now: https://github.com/mui-org/material-ui/blob/e167ea5af7f2a71a0ed132d6879cb77892a4b918/packages/material-ui/src/InputBase/InputBase.js#L66