Can I Apply Custom CSS or Style to the Shopify Polaris component?

Shopify Apps

Topic summary

A developer is building a Shopify app using Remix Run and React with Polaris components and wants to apply custom CSS styling without altering Polaris design tokens (colors, buttons, fonts).

Current Approach:

  • Using inline styles via the style attribute (e.g., whiteSpace: "nowrap" on a wrapper div)
  • Questioning whether this method is acceptable

Key Questions:

  • Is custom CSS permitted in Polaris-based Shopify apps?
  • What is the recommended approach for adding custom styles?
  • How to ensure compatibility with Shopify’s design system and avoid conflicts with Polaris?
  • What are best practices for maintaining compliance with Shopify guidelines?

Status: The discussion remains open with no responses yet. The developer is seeking guidance on proper styling methods and Shopify’s official recommendations for customizing Polaris components.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

I am developing a Shopify app using Remix Run and React while utilizing Shopify Polaris components.

I want to apply custom CSS styles to a Polaris component without modifying colors, buttons, or fonts.

Is it possible to use custom CSS within a Polaris-based Shopify app? If so, what is the recommended approach to do this while ensuring compatibility with Shopify’s guidelines?

Here is an example of how I am currently applying style:

1 of 3 tasks complete