Modifying Shopify Polaris Styles - Reactjs

Question

I am trying to modify Shopify Polaris Button components colors for React, I tried to change style.css file but nothing happened.

Any idea how to do so?

App.js

import React, { Component } from 'react';
import '@shopify/polaris/styles.css';
import {Page, Card, Button} from '@shopify/polaris';


class App extends Component {
  render() {
    return (
      <div className="App">
        <Page title="Example app">
          <Card sectioned>
            <Button onClick={() => alert('Button clicked!')}>Example button</Button>
          </Card>
       </Page>
     </div>
   );
 }
}

export default App;

I am trying to modify node_modules/@shopify/polaris/styles.css , but it does not make ay effect to button color.

Could use something like https://github.com/ds300/patch-package to do this and avoid forking. — iwasrobbed, May 28 '18 at 22:04

score 13 · Accepted Answer · answered Sep 18 '17 at 15:14

13

The Polaris design system is meant to provide consistency to apps within the Shopify ecosystem. It’s not intended as an alternative to something like Bootstrap or Foundation, so changing button colors wasn’t something we built the library to support.

answered Sep 18 '17 at 15:14

Ryan Frederick

156
1
3

Ryan is correct, don't know why someone gave him a downvote? – Tien Do Oct 20 '17 at 02:41
3

Although my original response is still true, if you aren’t building a Shopify app, and just want to build on what we’ve provided with Polaris, your best bet is to fork the library on GitHub and make the visual changes you’d like that way. (It’s worth noting that in any case you shouldn’t edit code in `node_modules`. Changes to packages installed there should be made upstream, wherever your package manager, e.g. NPM, is getting the source code from.) – Ryan Frederick Oct 22 '17 at 19:33
This sucks because it's such a great library - better than anything else out there! If I fork it, I won't be able to keep up with changes easily. – Nick Sep 10 '19 at 05:42
Sorry to disappoint. But Polaris has never tried to be the best solution for every app. – Ryan Frederick Sep 11 '19 at 06:45
I should also mention that since version 3.0, the Polaris license has changed to only support use for applications that integrate or interoperate with Shopify software or services. You can read more here: https://github.com/Shopify/polaris-react/blob/master/LICENSE.md Thanks for your understanding – Ryan Frederick Sep 11 '19 at 06:57
1

Until I saw1000 + inline styles wrapped for anything Polaris, there is no way i'm using it. – Brad Vanderbush Feb 11 '21 at 22:23

score 0 · Answer 2 · answered Apr 27 '22 at 19:14

Even thou full colorizing on a button isn't possible. You can partially modify a button like so:

          <div style={{color: '#bf0711'}}>
            <Button monochrome outline>
             Click Me
            </Button>
          </div>

This won't give you full control to like the background color but it can help to partially stylize the button. It creates an outline and light background when you roll over.

Modifying Shopify Polaris Styles - Reactjs

2 Answers2