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 github.com/ds300/patch-package to do this and avoid forking. — iwasrobbed

Ryan Frederick Ryan Frederick · Accepted Answer · 2017-09-18T15:14:33

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.

Modifying Shopify Polaris Styles - Reactjs

1 Answers