[feature] Auto-generate label property in makeStyles
See original GitHub issueTo make class names more readable for development like they are in material-ui, I would like to propose the following adjustment to make styles, to make it more compatible with old material-ui v4 makeStyles:
const useStyles = makeStyles({ name: 'MyComponent' })(theme => ({
root: {
color: 'red',
},
child: {
color: 'blue',
},
}));
which would internally expand the styles object to the equivalent to
const useStyles = makeStyles()(theme => ({
root: {
label: 'MyComponent-root',
color: 'red',
},
child: {
label: 'MyComponent-child',
color: 'blue',
},
}));
which would result in the following class names:
.tss-react-s0z026-MyComponent-root { color:red; }
.tss-react-pc49kh-MyComponent-child { color:blue; }
The following adjusted version of makeStyles would be able to perform this logic (which is what I am currently using and everyone else can easily patch into their own app as well:
const { useStyles } = createMakeStyles({ useTheme });
export default function makeStyles<Params = void>(opt?: { name?: string; }) {
const labelPrefix = opt?.name ? `${opt.name}-` : '';
return function <RuleName extends string>(
cssObjectByRuleNameOrGetCssObjectByRuleName: Record<RuleName, CSSObject> | ((theme: Theme, params: Params, createRef: () => string) => Record<RuleName, CSSObject>)
) {
const getCssObjectByRuleName = typeof cssObjectByRuleNameOrGetCssObjectByRuleName === 'function' ?
cssObjectByRuleNameOrGetCssObjectByRuleName :
() => cssObjectByRuleNameOrGetCssObjectByRuleName;
function useStylesHook(params: Params) {
const { cx, css, theme } = useStyles();
let count = 0;
function createRef() {
return `tss-react-ref_${count++}`;
}
const cssObjectByRuleName = getCssObjectByRuleName(theme, params, createRef);
const classes = Object.fromEntries(Object.keys(cssObjectByRuleName).map(ruleName => {
const cssObject: CSSObject = cssObjectByRuleName[ruleName as RuleName];
if (!cssObject.label) {
// Assign label to class name if none is provided
cssObject.label = labelPrefix + ruleName;
}
const className = css(cssObject);
return [ruleName, className];
})) as Record<RuleName, string>;
return { classes, theme, css, cx, };
}
return useStylesHook;
};
}
I think this would be a great addition to this library to make it easier to work with 👍
Issue Analytics
- State:
- Created 2 years ago
- Reactions:2
- Comments:13 (8 by maintainers)
Top Results From Across the Web
Internal implementation of "makeStyles" in React Material-UI?
The property name is the rule name and the property value is an object with CSS properties and/or nested rules. Each style rule...
Read more >Advanced (LEGACY) - MUI System
The makeStyles (hook generator) and withStyles (HOC) APIs allow the creation of multiple style rules per style sheet. Each style rule has its...
Read more >Styling with React's Material-UI v4 – Part 1 - ireadyoulearn.
Learn how to style Material-UI's components from scratch by using makeStyles. I will go over how it actually works and the quirks you...
Read more >Material UI 5 - the easiest way to migrate from makeStyles to ...
This component will receive a object or a function with the styles, and create corresponding classes. Then the last Step is - rework:...
Read more >React & Material UI #3: makeStyles - YouTube
In this video we go over:- What is JSS? How do we use JSS with Material UI and React?- How does Material UI...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Fixed in 1.0.3
Personally I do not think of it as a requirement to make css names follow the component name. It is what devs will usually do, but in general this is nothing more than a hint to show where the styles came from. I could imagine allowing to use the component function as
name
option so it would takeMyComponent.name
if it is available, but for me this would be a totally optional thing.I am also working on another improvement to the API regarding ref usage which I think are really nasty with the current API and can be simplified a lot 👍 This API change would also make use of the option argument in
makeStyles
which would go really well with thename
addition.