Блог

TL;DR: Прокрутите до EDIT2

MUIv4 создал для меня следующие классы из моей вложенной тематики:

 lt;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"gt;Emaillt;/labelgt;  

Теперь я заинтересован в изменении следующего класса:

 .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",  }  },  "amp;.MuiInputLabel-shrink": {  transform: "translate(0px, -15px) scale(0.75) !important",  },  "amp;[class*='MuiInputLabel-shrink']":{  transform: "translate(0px, -15px) scale(0.75) !important",  },  }  },  },  })  

Но ни одно из правил не работает? Что я делаю не так? Как я могу увидеть сгенерированные имена классов из createTheme?

РЕДАКТИРОВАТЬ — Я смог добиться желаемого эффекта с помощью CSS-оболочки:

 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 'amp;.MuiInputLabel-shrink*'  transform: translate(14px, -6px) scale(0.75);  }  },  }  },  })  

но я все еще удивляюсь, почему нет возможности написать это так:

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

Это было бы то, что я хотел бы написать, так как это понятно и легко читается!

Не уверен, почему вы создали свою тему таким образом (дублировали MuiInputLabel ).

Пожалуйста, убедитесь, что структура темы не содержит дублирующихся переопределяющих компонентов.

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

Если вы хотите стилизовать один и тот же компонент внутри определенного компонента, вы можете использовать amp; и другие css-приемы во вложенной структуре темы.

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

В противном случае вы могли бы создать свои собственные глобальные стили.

 // GlobalStyles.js import { createStyles, makeStyles } from '@material-ui/core';  const useStyles = makeStyles(() =gt; createStyles({  '@global': {  '*': {  boxSizing: 'border-box',  margin: 0,  padding: 0,  },  body: {  height: '100%',  width: '100%'  },  '#root': {  height: '100%',  width: '100%'  }  ...  '.some-class': {  '.MuiInputLabel-shrink*': { // or 'amp;.MuiInputLabel-shrink*'  transform: translate(14px, -6px) scale(0.75);  }  }  } }));  const GlobalStyles = () =gt; {  useStyles();   return null; };  export default GlobalStyles;  // App.js  ... import GlobalStyles from './GlobalStyles.js';  const App = () =gt; {  return (  ...  lt;Routergt;  lt;GlobalStyles /gt;  ...  lt;/Routergt;  ...  ) };