Как создать детерминированные стили при использовании createStyles ()

Question

Я создал компонент, который должен иметь собственные стили, поэтому я использовал createStyles({}).Кажется, это сработало (почти) так, как я хочу.Я также использовал createGenerateClassName({}), чтобы указать, что мне нужны детерминированные имена стилей.Тем не менее, эти двое, похоже, не работают вместе.В то время как стандартные компоненты MUI больше не имеют хеш-номер как часть имени класса, пользовательские стили имеют.Что нужно изменить для поддержки детерминированных стилей для каждого имени класса?

Вот код, который у меня есть:

import {Component, ComponentMeta, ComponentProps, SizeObject} from '@xyz/abc' // real name removed here due to restrictions
import {Button, Paper} from '@material-ui/core'
import {createGenerateClassName, createStyles, MuiThemeProvider, Theme, withStyles} from '@material-ui/core/styles'
import JssProvider from 'react-jss/lib/JssProvider'

const theme = createMuiTheme({
    palette: {
        primary: {
            main: 'blue',
        },
        secondary: {
            main: 'green',
        },
        error: {
            main: 'red',
        },
    },
    typography: {
        useNextVariants: true,
    },
})

const styles = ({palette, spacing}: Theme) =>
    createStyles({
        button: {
            backgroundColor: '#2196f3',
        },
        buttonDark: {
            backgroundColor: '#880e4f',
        },
        buttonLight: {
            backgroundColor: '#e1bee7',
        },
    })

const generateClassName = createGenerateClassName({
    dangerouslyUseGlobalCSS: true,
})

class AnalysisSelector extends Component<ComponentProps, any> {
    render() {
        const {classes} = this.props
        return (
            <MuiThemeProvider theme={theme}>
                <JssProvider generateClassName={generateClassName}>
                    <Paper {...this.props.emit()} className={'paperContainer'}>
                        <Button className={classes.button}>Primary Light</Button>
                        <Button className={classes.buttonLight}>Primary</Button>
                        <Button className={classes.buttonDark}>Primary Dark</Button>
                    </Paper>
                </JssProvider>
            </MuiThemeProvider>
        )
    }
}

export const MNOAnalysisSelector = withStyles(styles, {name: 'mnoButton'})(AnalysisSelector)

Наконец, вот отрендеренный HTML:

    <button class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-flat mnoButton-button-1" tabindex="0" type="button">
        <span class="MuiButton-label">Primary Light</span>
        <span class="MuiTouchRipple-root"></span>
    </button>
    <button class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-flat mnoButton-buttonLight-3" tabindex="0" type="button">
        <span class="MuiButton-label">Primary</span>
        <span class="MuiTouchRipple-root"></span>
    </button>
    <button class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-flat mnoButton-buttonDark-2" tabindex="0" type="button">
        <span class="MuiButton-label">Primary Dark</span>
        <span class="MuiTouchRipple-root"></span>
    </button>
</div>

У меня все в порядке с именами классов: mnoButton-button, mnoButton-buttonLight и mnoButton-buttonDark, мне просто нужно удалить конечный хеш.

Спасибо за любые предложения / помощь.

Answer 1

Вы можете использовать глобальные имена классов, как описано в v4 здесь: https://next.material -ui.com / styles / advanced / # jss-plugin-global

jss-plugin-globalтакже включен в v3, поэтому с ним будет работать тот же подход.

Единственный способ *1009* для другого синтаксиса для создания глобальных имен - это если name передан withStylesначинается с "Mui" (что я бы не рекомендовал делать).

Я показал оба подхода в приведенном ниже коде.

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

const styles = theme => ({
  "@global": {
    ".mnoButton-button": {
      backgroundColor: "#2196f3"
    },
    ".mnoButton-buttonDark": {
      backgroundColor: "#880e4f"
    },
    ".mnoButton-buttonLight": {
      backgroundColor: "#e1bee7"
    }
  },
  button: {
    backgroundColor: "purple",
    color: "white"
  }
});

const MyButtons = ({ classes }) => {
  return (
    <>
      <Button className="mnoButton-button">Hello World</Button>
      <Button className="mnoButton-buttonDark">Hello World</Button>
      <Button className="mnoButton-buttonLight">Hello World</Button>
      <Button className={classes.button}>Hello World</Button>
    </>
  );
};
export default withStyles(styles, { name: "Mui-mnoButton" })(MyButtons);