反应星级评定未按预期工作

Question

我试图实施反应所提供的星级评分系统。我引用这篇文章来做这件事。

http://cameronroe.github.io/react-star-rating/?react-star-rating=4

我的星级评分jsx文件

import React from 'react';
import StarRating from 'react-star-rating';

class FormComponent extends React.Component {
    render() {

        return (

            <StarRating name="airbnb-rating" totalStars={5}/>
        );
    }
}
export default FormComponent;

我这样称呼它

<div className="preview_usr_stars">

    <FormComponent/>

</div>

但是我得到了这样的结果。悬停效果不起作用，基本上它不起作用

Answer 1

看起来你没有加入CSS。

从您提供的链接：

Include the css:
<link rel="stylesheet" href="node_modules/react-star-rating/dist/css/react-star-rating.min.css">

如果您将webpack与css-loader一起使用，则只需执行

即可

import 'react-star-rating/dist/css/react-star-rating.min.css'