I am trying to override MuiTabs style - more specifically flexContainer (.MuiTabs-flexContainer). First, can someone explain me what exactly represent these ".css-heg063" in front of the selector? Is this sth from styled-componentes incorporated with MUI or? Before upgrading MUI version I haven't seen those. Second, in my theme.ts file I want my content to flex-end but this doesn't apply to my app at all. What is wrong with my code?
Short Answer:
You cannot simply use flex box properties because these will cause misplacement of the active-indicator.
It can be achieved with simple margin property
margin-left: 'auto';
Demo: https://codesandbox.io/s/material-demo-forked-y1278?file=/demo.js
Long Answer:
Just think of .css-heg063 as a code generated by your parser (babel in most cases) to uniquely identify the CSS you wrote in different chunks(files, modules or pre-processors).
For Example: if you have same css-selector name written in two different files with different css properties. you want to use both at different places. Parser prepends a unique ID/hash/number to the classname to identify without any extra developer effort.