styling Visual Picker

[ama0223]

Background

I am trying to use VisualPickerRadio as per this previous design discussion #3389 (comment).

I want to add specific styles to the associated VisualPickerRadioProps in a separate styles sheet, but I can't find a correct import.

Instead of props, I also tried in line styles like width and height but they do not seem to adjust either.

What is the flexibility on styling these visual picker components?

Feedback

Find correct style implementation

Stage of design

No response

Research

No response

Relevant links

No response

Are you looking for visual design support?

• Yes

Additional Information

No response

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, but it's not recommended to override any Paste component styles with CSS classes or selectors. As per the Paste documentation, the <Theme.Provider> cannot access these styles, so they do not get updated.

Here's the relevant excerpt from the documentation:

### Some of my styles look broken!

There are a few places that can cause styling bugs:

*   Check if there's more than one `<Theme.Provider>` and update of all of them, or the remove extra ones if they are unnecessary.
*   Make sure you aren't overriding any Paste component styles with CSS classes or selectors. The `<Theme.Provider>` cannot access these styles, so they do not get updated.
*   Also check that you are using Paste tokens when styling custom components. See our [guidelines for theming custom components](/theme/#using-tokens-in-custom-components) for more information.

If you need to customize the appearance of your components, consider using Paste tokens when styling custom components. You can find more information in the guidelines for theming custom components.

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Unable to pull in component ". Radio (single row)" - Answer (updated: 01/30/2023, similarity score: 83%)
• Bug with overriding DisclosureContent styles (updated: 03/15/2023, similarity score: 83%)
• Visual Picker - Design and Spec RFC (updated: 08/18/2023, similarity score: 83%)

[SiTaggart]

Hi @ama0223

For internal Twilio teams, we do not allow custom styling on components in Paste. We do this for a number of very good reasons as outlined in this discussion and in some of our FAQs.

We encourage folks to use the components as they come out of the box.