如何在JSS中為嵌套主題全域覆寫MUIv4類？

TL;DR：滾動到 EDIT2

MUIv4 從我的嵌套主題中為我創建了以下類：

<label class="MuiFormLabel-root-121 
MuiInputLabel-root-113 
MuiInputLabel-formControl-115 
MuiInputLabel-animated-118 
MuiInputLabel-shrink-117 
MuiInputLabel-marginDense-116 
MuiInputLabel-outlined-120 
Mui-disabled 
Mui-disabled 
MuiFormLabel-filled-123" 

data-shrink="true">Email</label>

現在我有興趣更改以下課程：

.MuiInputLabel-outlined-120.MuiInputLabel-shrink-117 {
    transform: translate(14px, -6px) scale(0.75);
}

因此我有一個主題檔案 [重復只是為了展示我的嘗試]：

createTheme({
    overrides: {
      MuiInputLabel: {
        outlined: {
          color: red[500],
          backgroundColor:purple[600],
          MuiInputLabel: {
            shrink: {
              transform: "translate(0px, -15px) scale(0.75) !important",
            }
          },
          "&.MuiInputLabel-shrink": {
            transform: "translate(0px, -15px) scale(0.75) !important",
          },
          "&[class*='MuiInputLabel-shrink']":{
            transform: "translate(0px, -15px) scale(0.75) !important",
          },
        }
      },
    },
  })

但是這些規則都不起作用？我究竟做錯了什么？如何從 createTheme 查看生成的 classNames？

編輯 - 我能夠使用 CSS Wrapper 實作想要的效果：

const MUIWrapper = styled.div`
[class*="MuiInputLabel-outlined"][class*="MuiInputLabel-shrink"] {
    transform: translate(0px, -15px) scale(0.75);
}
  }
`

但實際上我不想以這種方式實作它

編輯 2：正如所指出的那樣，@hotcakedev可以使用：

createTheme({
    overrides: {
      ...
      MuiFormLabel: {
        outlined: {
          '.MuiInputLabel-shrink*': { // or '&.MuiInputLabel-shrink*'
            transform: translate(14px, -6px) scale(0.75);
          }
        },
      }
    },
  })

但我仍然想知道為什么沒有可能這樣寫：

createTheme({
    overrides: {
      ...
      MuiFormLabel: {
        outlined: {
          MuiInputLabel: { 
            shrink: {
              transform: translate(14px, -6px) scale(0.75);
            }
          }
        },
      }
    },
  })

這就是我想寫的，因為它清晰易讀！

uj5u.com熱心網友回復：

不知道你為什么這樣構建你的主題（已復制MuiInputLabel）。

請確保主題結構沒有重復的覆寫組件。

  createTheme({
    overrides: {
      ...
      MuiFormLabel: {
        outlined: {
          ...
        },
        shrink: {
          ...
        }
      }
    },
  })

如果您想在特定組件內設定相同組件的樣式，您可以&在嵌套主題結構中使用和其他 css 技巧。

  createTheme({
    overrides: {
      ...
      MuiFormLabel: {
        outlined: {
          '.MuiInputLabel-shrink*': { // or '&.MuiInputLabel-shrink*'
            transform: translate(14px, -6px) scale(0.75);
          }
        },
      }
    },
  })

否則，您可以構建自己的全域樣式。

// GlobalStyles.js
import { createStyles, makeStyles } from '@material-ui/core';

const useStyles = makeStyles(() => createStyles({
  '@global': {
    '*': {
      boxSizing: 'border-box',
      margin: 0,
      padding: 0,
    },
    body: {
      height: '100%',
      width: '100%'
    },
    '#root': {
      height: '100%',
      width: '100%'
    }
    ...
    '.some-class': {
      '.MuiInputLabel-shrink*': { // or '&.MuiInputLabel-shrink*'
        transform: translate(14px, -6px) scale(0.75);
      }
    }
  }
}));

const GlobalStyles = () => {
  useStyles();

  return null;
};

export default GlobalStyles;

// App.js

...
import GlobalStyles from './GlobalStyles.js';

const App = () => {
  return (
    ...
    <Router>
      <GlobalStyles />
      ...
    </Router>
    ...
  )
};

標籤：javascript css 反应 材质-ui

上一篇：即使依賴沒有改變也會執行useState

下一篇：檢查是否在回應中單擊框內或框外的替代方法？