html标签的随机背景颜色

Question

我在 div-s 中遇到样式问题。我在下面附上了我的代码。我不希望我的背景颜色是固定颜色。我想给每个 div 随机颜色。你知道怎么做吗？非常感谢你。 现在它使用 style={{ backgroundColor: "#ff8500" }}

import React from "react";
import Slider from "react-slick";
import { Link } from "react-router-dom";

const SubCategory = (props) => {
    const settings = {
        className: "categories--carousel",
        slidesToShow: 5,
        slidesToScroll: 5,
        infinite: false,
    };
    return (
        <div className="page--block">
            <h2 className="title--block">Популярные категории</h2>
            <Slider {...settings}>
                <div className="categories--carousel__item">
                    <div
                        className="categories--carousel__item-inner"
                        style={{ backgroundColor: "#ff8500" }}
                    >
                        <Link to="#" className="str_link" />
                        <div className="categories--carousel__title">MockData</div>
                    </div>
                </div>
                <div className="categories--carousel__item">
                    <div
                        className="categories--carousel__item-inner"
                        style={{ backgroundColor: "#ff8500" }}
                    >
                        <Link to="#" className="str_link" />
                        <div className="categories--carousel__title">MockData</div>
                    </div>
                </div>
                <div className="categories--carousel__item">
                    <div
                        className="categories--carousel__item-inner"
                        style={{ backgroundColor: "#ff8500" }}
                    >
                        <Link to="#" className="str_link" />
                        <div className="categories--carousel__title">MockData</div>
                    </div>
                </div>
                <div className="categories--carousel__item">
                    <div
                        className="categories--carousel__item-inner"
                        style={{ backgroundColor: "#ff8500" }}
                    >
                        <Link to="#" className="str_link" />
                        <div className="categories--carousel__title">MockData</div>
                    </div>
                </div>
                <div className="categories--carousel__item">
                    <div
                        className="categories--carousel__item-inner"
                        style={{ backgroundColor: "#ff8500" }}
                    >
                        <Link to="#" className="str_link" />
                        <div className="categories--carousel__title">MockData</div>
                    </div>
                </div>
                {/* asd */}
            </Slider>
        </div>
    );
};

export default SubCategory;