修改Shopify Polaris样式- Reactjs

Question

我试图修改“北极星”按钮组件的颜色以作出反应，我试图更改style.css文件，但什么也没有发生。

你知道怎么做吗？

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;

我正在尝试修改node_modules/@shopify/polaris/styles.css，但它并没有对按钮的颜色产生任何效果。

Answer 1

北极星设计系统旨在为Shopify生态系统中的应用程序提供一致性。它并不是用来替代诸如Bootstrap或Foundation之类的东西，所以改变按钮颜色并不是我们构建的库支持的东西。

Answer 2

即使你的按钮完全着色也是不可能的。您可以部分修改按钮，如下所示：

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

这不会给你完全控制喜欢的背景颜色，但它可以帮助部分风格按钮。当你翻滚时，它会创建一个轮廓和明亮的背景。