[examples] Customized component styles is missing

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

hello ! i cloned a example project for MUI and Nextjs from https://github.com/mui/material-ui/tree/master/examples/nextjs and started developing on it. i created a custom component with some given styles like the following photo: when i do yarn dev all the styles are in place but when i get a build from it with yarn build then yarn start the styles i’ve given it goes missing

Expected behavior 🤔

i expect the styles to work in production as development any solutions ?

Steps to reproduce 🕹

No response

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: macOS 12.3.1
  Binaries:
    Node: 16.14.0 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.3.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 100.0.4896.88
    Edge: Not Found
    Firefox: 99.0.1
    Safari: 15.4
  npmPackages:
    @emotion/react: latest => 11.9.0 
    @emotion/styled: latest => 11.8.1 
    @mui/base:  5.0.0-alpha.76 
    @mui/icons-material: latest => 5.6.1 
    @mui/material: latest => 5.6.1 
    @mui/private-theming:  5.6.1 
    @mui/styled-engine:  5.6.1 
    @mui/system:  5.6.1 
    @mui/types:  7.1.3 
    @mui/utils:  5.6.1 
    @types/react:  18.0.5 
    react: latest => 18.0.0 
    react-dom: latest => 18.0.0 

[soheilhassanjani]

Thanks, I got it. 🙏

[mnajdova]

@soheilhassanjani every MUI component comes with a set of global classes that you can use for styling purposes. For example, for the input you can use ‘MuiInputBase-root’. These classes are deterministic and will always be there (both in production and development mode). For the classes generated by emotion, I saw that you tried to use the attribute for the classes which I suppose is the problem. Please see https://stackblitz.com/edit/nextjs-kcor2y?file=components%2Fcustom%2FTextField.jsx

I hope this explanation helps.