如何覆盖 react-chartist 组件中的样式？

Question

我有一个简单的 React JS 组件，它围绕着非常酷的 React ChartistGraph 组件。 唯一的问题是样式似乎被 ChartistGraph 默认 CSS 覆盖。 有很多关于常规Chartist js 包的信息，但关于React JS 包的信息并不多。

如您所见，我尝试通过两种方式更改填充颜色：通过样式类和通过组件支持的道具。

import React from 'react';
import { Paper, withStyles } from 'material-ui';
import ChartistGraph from 'react-chartist';

const styles = theme => ({
  graphStyle: {
    fill: 'red',
  },
});

const CustomChart = ({ classes, graph }) => {
  return (
    <Paper>
      <ChartistGraph
        className={classes.graphStyle}
        data={graph.data}
        options={graph.options}
        type={graph.type}
        style={{ fill: 'red' }}
      />
    </Paper>
  );
};

export default withStyles(styles)(CustomChart);

图表样式的图片

Answer 1

您可以使用 jss 的嵌套规则（默认包含在material-ui ）：

const styles = theme => ({
  graphStyle: {
    '& .ct-label': { fill: 'red' },
  },
});

完整代码：

import React from 'react';
import { Paper, withStyles } from 'material-ui';
import ChartistGraph from 'react-chartist';

const styles = theme => ({
  graphStyle: {
    '& .ct-label': { fill: 'red' },
  },
});

const CustomChart = ({ classes, graph }) => {
  return (
    <Paper>
      <ChartistGraph
        className={classes.graphStyle}
        data={graph.data}
        options={graph.options}
        type={graph.type}
        // style={{ fill: 'red' }} // omitted
      />
    </Paper>
  );
};

export default withStyles(styles)(CustomChart);

Answer 2

我最近遇到了类似的问题。React-Chartist 建立在 react 而不是 material-ui 之上。当您检查时，您会发现常规的 css 类名，而不是“material ui-ish”类名（如 MuiTable-root、MuiTable- selectedRow 等）。所以，恕我直言，它不会支持 material-ui 方法（withStyle/makeStyle）和规则。

但你可以做的是：-

• 创建一个 css 文件并将您的样式放在那里
• 并将其导入到您想要的位置

.您可以将它导入到应用程序的主文件（index.js 或其他任何文件）中，因为应用程序中的每个 css 都将捆绑在一个文件中。