How to apply css code to all switches component?

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 Flash Sale”

button#switch-Status\ Flash\ Sale{


}

1 Like

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

1 Like

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).

1 Like

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;
}
1 Like

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.

1 Like

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=“app-switch-view”]

css not working.
it already exists
<pre><span><style>

1 Like

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


it works well.


it’s not working.

1 Like

I believe you have more code below your screenshots so my test is not going as it should (some broken components, but nevertheless I will show what I have here).

With your code (testing 2 buttons with different names, and added background: red to the code): the targeted switch is pushed to the left a bit, and the background is red.

With my new code, realizing that the data-test level is 1 level above the “button” so I adjusted it.

So, in short, it should be:

[data-test=“app-switch-view”] button

1 Like

Wow cool, I’ll give it a try

1 Like

unfortunately, still can’t.
thanks for helping master ThinhDinh and master Darren.

Sorry if my question bothered you.

maybe later someone can read this case and can help.

1 Like

Can you paste the full code here so I can take a look at it?

1 Like

The Glide experts are ridiculous ! Great to see !!

1 Like

Just contributing my part to make this community great :sweat_smile:

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

2 Likes

Great!

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.