How can I customize the UI for my custom POS app using @Shopify/retail-ui-extensions-react?

[tuanbe27]

Hello Shopify Support Team,

I am currently developing a custom Shopify POS App and I'm utilizing the @Shopify/retail-ui-extensions-react library. I have encountered some difficulties with UI customization, specifically regarding styling components.

My main challenges are:

1. Understanding the scope of styling options available within the library.
2. Identifying the proper way to apply custom styles to components, as it seems inline styles and certain common components like View or Badge are not available or do not accept the style property.

I would greatly appreciate detailed guidance on the following points:

• How can I apply custom styles to the components provided by @Shopify/retail-ui-extensions-react? Is there a specific methodology or set of utility functions I should be using?
• Are there predefined classes or a theming system that I can leverage for styling purposes?
• In the case of creating a badge-like feature or other common UI patterns not directly available in the library, what is the recommended approach?

Furthermore, if you have any documentation, resources, or code examples that could assist with the styling process within the POS App extensions framework, it would be incredibly helpful.

Thank you for your support and I look forward to your response.

Best regards,
Nguyen Tuan