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.