[Material Themes & Styling] - There seems to be an issue with the RadioButtons and RadioGroup.

0 Answers 18 Views
RadioButton RadioGroup Styling Styling / Themes
Sherman
Top achievements
Rank 2
Sherman asked on 20 Apr 2024, 09:53 AM | edited on 20 Apr 2024, 10:30 AM

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.

Wissam
Telerik team
commented on 29 Apr 2024, 11:40 AM

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

No answers yet. Maybe you can help?

Tags
RadioButton RadioGroup Styling Styling / Themes
Asked by
Sherman
Top achievements
Rank 2
Share this question
or