Hey team, so, I suspect there is something perhaps wrong with the scss files or the css files after I run sass to compile it. I have been trying a few different material related themes that come out of the box (not tinkering). Just to list a few:
- material-lime.scss
- material-lime-dark.scss
- material-sky.scss
I haven't tried the others yet. But one of them seems fine, material-nova.scss appears to be okay after running the sass command. My point being, when I tried to compare my own app and the examples on the website, it always looks different. Especially for the selected RadioButtons.
Also, just a separate but important question. I have been experimenting and trying different approaches to importing the css files after I did a compilation. For example:
sass material-lime.scss material-lime.css
And then after that I would import material-lime.css to my App.js file.
But when the application is doing a hot reload, the changes aren't reflected on the web page. Separately, I have experimented with import the css file in the component's index.jsx file. Sometimes it works, sometimes it doesn't. So I'm really curious as to why it's like this.
Is there a proper method to importing the themes/styles and then seeing the changes reflected on the web page after running npm start?
What is your recommendation?
P.S. At this present point, I clearly haven't tested every single other UI components from the library, so I won't know if there are others that are affected as well. So far, I've only discovered the issue with the RadioButton and RadioGroup components.
Hi, Sherman,
I could see in the screenshot that the material-nova theme is used. Regarding the difference in the rendering, I believe it could be caused by external styles applied to the radio button element. Therefore, can you please check if this is the case, by inspecting your css/scss files?
I also tested the mentioned material theme swatches, but they are rendering as expected. Therefore, can you please send me a runnable project where the faced issue is reproduced so that I can inspect it further?
As for importing and using SCSS files, we recommend creating a `.scss` file and importing it in `index.jsx` (App.jsx in the below demo). I tested it with a hot reload and the changes get applied:
Therefore, can you please include the faced issue with the compilation in the project?
You can also check the following articles for theme customization:
Looking forward for your reply.
Regards,Wissam
Progress Telerik