I am trying to modify Shopify Polaris Button ponents 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.

I am trying to modify Shopify Polaris Button ponents 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.

• javascript
• css
• reactjs
• shopify
• polaris

• You should not modify files under node_modules folder. – Tien Do Commented Oct 20, 2017 at 2:40
• Could use something like github./ds300/patch-package to do this and avoid forking. – iwasrobbed Commented May 28, 2018 at 22:04

2 Answers 2

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.

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.