I have modified the css for the switch component, so that it has an ios-like style when opened on android. but how to make it automatically applied to all switch components? because now I can only implement by including the name of the switch component. this is element switch only for “Status Fla…

Finally after a night of experimenting I found the right code and it works great. :woozy_face: :weary: :yawning_face: button[role="switch"] [solved]

Try using this instead: <pre><span><style> [data-test="app-switch-view"] { /* Your CSS goes here } That’s the generic class name for all switch components. You would need to apply the CSS on every details screen where it’s needed.

I’ve tried it and it still doesn’t work

Can you share the CSS that you’re using? (I’m no CSS guru, but if you share what you have then somebody else may be able to help).

Darren’s method should work as long as the CSS is correct, since this is a component that has a stable name. I would like to view the snippet code being used here to see if there’s something we’re missing.

button#switch-Status\ Flash\ Sale{ position: relative; margin-left: 8px; flex-shrink: 0; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; width: 52px; height: 21px; }

[image] antoniedik: button#switch-Status\ Flash\ Sale I think this is the problem, since you’re targeting only that specific button. You should change it to [data-test="app-switch-view"] and append the <pre><span><style> tags

<pre><span><style> [data-test="app-switch-view"] { position: relative; margin-left: 8px; flex-shrink: 0; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; width: 52px; height: 21px; } Like that.

[image] antoniedik: button#switch-Status\ Flash\ Sale the code works fine but it seems the target is not quite right and I just found for targets with certain element names like. button#switch-Status\ Flash\ Sale I wish I could target all switch components. if using this code. [data-test=…

Can you send some screenshots over on how that is not working? What is not “quite right” in this case?

[image] antoniedik: [data-test=“app-switch-view”] [ios style] it works well. [ios style not working] it’s not working.

How to apply css code to all switches component?

Ask for Help

antoniedik June 28, 2022, 2:13am 18

Finally after a night of experimenting I found the right code and it works great.

button[role="switch"]

Topic		Replies	Views
CSS Class for a Switch Ask for Help	18	101	February 21, 2025
CSS Styling Switch Color Ask for Help	2	805	September 15, 2023
CSS on element level Feature Requests	4	211	April 13, 2024
Tell Glide how you use CSS General	128	18059	December 27, 2022
CSS and its uses on components Ask for Help	8	242	December 19, 2023

How to apply css code to all switches component?

Related topics