[examples] Customized component styles is missing
See original GitHub issueDuplicates
- 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
Issue Analytics
- State:
- Created a year ago
- Comments:5 (2 by maintainers)
Top Results From Across the Web
Component styles - Angular
This page describes how to load and apply these component styles. Run the live example / download example in Stackblitz and download the...
Read more >Extending styles with styled-components not working
Extending, according to the docs, is when you have a styled component and you create a new one based on that. On the...
Read more >How To Style React Components | DigitalOcean
In this tutorial, you'll learn three different ways to style React components: plain Cascading Style Sheets (CSS), inline styles with ...
Read more >Styling a Web Component - CSS-Tricks
Custom properties go through the shadow DOM That's right, they do. You can select the web component in the CSS and set them...
Read more >Server-side rendered styled-components with Nextjs
You'll also need to customize the .babelrc and use babel-plugin-styled-components. Refer to our example in the Next.js repo for an up-to-date ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Thanks, I got it. 🙏
@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.