中央支助系统

div .colored-circle {
      display: inline-block;
      margin-left: 5px;
      margin-right: 5px;
      margin-bottom: -2px;
      border-radius: 50%;
      border-style: solid;
      border-width: 0.5px;
      border-color: black;
      height: 20px;
      width: 20px;
    }

组件：

const ColoredCircle = ({ color }) => {

  const styles = { backgroundColor: color };

  return color ? (
    <Fragment>
      <span className="colored-circle" style={styles} />
    </Fragment>
  ) : null;
};

export default ColoredCircle;

使用与显示“活动”或“非活动”相同的逻辑，并添加一个带有css或img的所需颜色的div，而不是text。

如果您碰巧使用材质UI，您可以这样做：

import React, { Fragment } from "react";
import { makeStyles } from "@material-ui/core";

const RADIUS_DOT = 1.5;
const useStyles = makeStyles((theme) => ({
  circle: {
    borderRadius: RADIUS_DOT,
    height: RADIUS_DOT * 2,
    width: RADIUS_DOT * 2,
    padding: 0,
  },
}));

const ColoredCircle = ({ color }) => {
  const styles = { backgroundColor: color };
  const classes = useStyles();

  return color ? (
    <Fragment>
      <span className={classes.circle} style={styles} />
    </Fragment>
  ) : null;
};

export default ColoredCircle;

you can use this package, can be helpful

npm iReact-颜色-圆圈

import Circle from '@uiw/react-color-circle';

return (
<Circle
  colors={[ '#F44E3B' ]}
/>);