如何始终覆盖后缀不确定的JSS样式？ TLDR; 特别是例如：其他注意事项相关

编程问答 2022-06-07

问题描述

我正在寻找有关@material-ui/core的建议，

TLDR;

我希望采用一种一致的方法来处理css-in-js生成的具有不确定数字后缀的className，同时尽可能使用@material-ui/core的{​​{1}}函数。

特别是

“ styled()生成的类名是不确定的”（https://material-ui.com/styles/advanced/#class-names），但是到目前为止，在我公司从事的项目已经使用@material-ui/core/styles函数包装组件以应用样式。

效果很好，直到我想覆盖伪类之一如何应用于我正在设置样式的根元素之前。在这一点上，如果我尝试使用常规的旧类选择器以特定状态控制样式，则该类上没有后缀即可使用，但是只要JSS生成的className具有数字后缀即可，它就坏了。

当我说“后缀”时​​，是指组件的根className可能是styled()，但是当为该特定实例生成className时，可能会附加一个数字后缀：.makeStyles-root

例如：

组件：.makeStyles-root-123 https://material-ui.com/api/input-label/#inputlabel-api 我想弄弄InputLabel发生的转换，但随后该转换被.MuiInputLabel-formControl覆盖。

如果我尝试使用常规的类选择器：

.MuiInputLabel-shrink

仅当JSS类没有后缀时，它才有效

，如果我尝试使用规则名称（export const InputLabel = styled(MuiInputLabel)({ `&.MuiInputLabel-formControl`: { transform: 'translate(2px,8px) scale(1)',},`&.MuiInputLabel-shrink`: { transform: 'translate(0) scale(0.6)',}); 实际上不支持该规则名称）

styled()

它仅将无效规则应用于元素：

export const InputLabel = styled(MuiInputLabel)({
  formControl: {
    transform: 'translate(2px,shrink: {
    transform: 'translate(0) scale(0.6)',});

我也尝试过传递 formControl: [object Object] shrink: [object Object]; （但这似乎根本不起作用）

classes

其他注意事项

  • 我不想使用主题替代（我想可以在此处使用这些规则），因为我不想将此样式应用于InputLabel的所有实例

  • 所以让我倾向于使用hook API / makeStyles（）：https://material-ui.com/styles/basics/#hook-api

    • 但这并不适合采用样式文件的当前模式。

相关

解决方法

据我所知，styled()不可能做到这一点，

所以我只讨论了其他帖子所建议和使用的makeStyles()。

但是我使用了两者的一些混搭，所以我仍然可以将样式保存在单独的文件中。

const useLabelStyles = makeStyles((theme) => ({
  root: {
    color: theme.text.primary,},formControl: {
    transform: 'translate(2px,8px) scale(1)',shrink: {
    transform: 'translate(0) scale(0.6)',}));

export const InputLabel = styled((props) => {
  const theme = useTheme();
  const classes = useLabelStyles(theme);
  return (
    <MuiInputLabel
      classes={classes}
      {...props}
    />
  );
})({});
css-in-jsjssreactjsreactjsreactjsreactjs