时间戳

首页 > 解决方案 > 如何覆盖 react-chartist 组件中的样式？

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

问题描述

我有一个简单的 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);

图表样式的图片

标签： javascriptreactjsmaterial-uichartist.js

解决方案

您可以使用 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);

推荐阅读