使用 createStyles() 时如何创建确定性样式

Question

我创建了一个需要自定义样式的组件，所以我使用了createStyles({})。这似乎（几乎）如我所愿。我还使用 createGenerateClassName({}) 来表示我需要确定性的样式名称。但是，两者似乎并没有一起工作。虽然标准 MUI 组件不再将散列号作为 class 名称的一部分，但自定义样式有。需要更改什么以支持每个 class 名称的确定性样式？

这是我的代码：

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>

我可以接受 class 名称 mnoButton-button、mnoButton-buttonLight 和 mnoButton-buttonDark，我只需要删除结尾的散列。

感谢任何建议/帮助。

Answer 1

您可以使用 v4 中记录的全局 class 名称：https://next.material-ui.com/styles/advanced/#jss-plugin-global

jss-plugin-global 也包含在 v3 中，因此同样的方法也适用。

用于创建全局名称的其他语法的 only way 是如果传递给 withStyles 的 name 以 "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);

Answer 2

来源：github

import { StylesProvider, createGenerateClassName } from '@material-ui/core/styles';
// other imports

const generateClassName = (rule, styleSheet) =>
  `${styleSheet.options.classNamePrefix}-${rule.key}`;

test(deterministic classnames, () => {
  render(
    <StylesProvider generateClassName={generateClassName}>
      <App />
    </StylesProvider>
  );
});

使用 createStyles() 时如何创建确定性样式

How to create deterministic styles when using createStyles()

reactjs

material-ui

jss