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.

Answer 1

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.

Answer 2

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.