Reactjs 如何在使用createStyles（）时创建确定性样式

我创建了一个需要自定义样式的组件，所以我使用了

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)

import{Component，ComponentMeta，ComponentProps，SizeObject}来自“@xyz/abc”//由于限制，此处删除了实名
从“@material ui/core”导入{按钮，纸张}
从“@material ui/core/styles”导入{createGenerateClassName，createStyles，MuiThemeProvider，Theme，withStyles}
从“react jss/lib/JssProvider”导入JssProvider
const theme=createMuiTheme({
调色板：{
主要：{
主旋律：“蓝色”，
},
中学：{
主旋律：“绿色”，
},
错误：{
主旋律：“红色”，
},
},
排版：{
useNextVariants：正确，
},
})
常量样式=（{调色板，间距}：主题）=>
创建样式({
按钮：{
背景颜色：“#2196f3”，
},
按钮：{
背景颜色：“#880e4f”，
},
按钮灯：{
背景颜色：“#e1bee7”，
},
})
const generateClassName=createGenerateClassName({
危险地使用GlobalCSS：是的，
})
类分析选择器扩展组件{
render（）{
const{classes}=this.props
返回(
主光
主要的，重要的
原色暗
)
}
}
export const mnoanalysesselector=with样式（样式，{name:'mnoButton'}）（分析选择器）

最后是呈现的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

很满意，我只需要删除结束哈希

---

感谢您的建议/帮助。

您可以使用v4中记录的全局类名，如下所示：

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

创建全局名称的另一种语法是，如果传递给

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);

从“React”导入React；
从“@material ui/core/styles”导入{withStyles}”；
从“@物料界面/核心/按钮”导入按钮；
常量样式=主题=>({
“@global”：{
“.mnoButton按钮”：{
背景色：“2196f3”
},
“.mnoButton按钮标记”：{
背景颜色：“880e4f”
},
“.mnoButton按钮灯”：{
背景颜色：“E17”
}
},
按钮：{
背景颜色：“紫色”，
颜色：“白色”
}
});
常量MyButtons=（{classes}）=>{
返回(
你好，世界
你好，世界
你好，世界
你好，世界
);
};
导出默认样式（样式，{name:“Mui mnoButton”}）（MyButtons）；

来源：

从'@material ui/core/styles'导入{StylesProvider，createGenerateClassName}；
//其他进口
const generateClassName=（规则、样式表）=>
`${styleSheet.options.classNamePrefix}-${rule.key}`；
测试（确定性类名，（）=>{
渲染(
);
});

您使用的是什么版本的Material UI？我使用的是Material UI 3.9.2。谢谢Ryan。使用“@global”可以满足我的需要。

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>
  );
});