修改 Shopify Polaris 样式 - Reactjs

Question

我正在尝试为 React 修改 Shopify Polaris Button 组件颜色，我尝试更改 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

Polaris 设计系统旨在为 Shopify 生态系统内的应用程序提供一致性。它并不是要替代 Bootstrap 或 Foundation 之类的东西，因此更改按钮颜色不是我们构建库支持的东西。

Answer 2

即使在按钮上完全着色也是不可能的。您可以像这样部分修改按钮：

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

这不会让您完全控制喜欢背景颜色，但它可以帮助部分风格化按钮。当您翻身时，它会创建一个轮廓和浅色背景。

修改 Shopify Polaris 样式 - Reactjs

Modifying Shopify Polaris Styles - Reactjs

javascript

css

shopify

reactjs

polaris