question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[feature] Auto-generate label property in makeStyles

See original GitHub issue

To 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:closed
  • Created 2 years ago
  • Reactions:2
  • Comments:13 (8 by maintainers)

github_iconTop GitHub Comments

1reaction
garronejcommented, Oct 13, 2021

As for the bug: look here

Fixed in 1.0.3

1reaction
oleecommented, Oct 12, 2021

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 take MyComponent.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 the name addition.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found