Material UI 评价环绕长值

Question

我目前正在尝试解决 Material UI 评级组件以及如何在图标溢出父组件的 width 时执行 flex-wrap。

如果我尝试将 flex-wrap: wrap 添加到评级组件，它实际上会包装图标，但交互功能在第一行后停止工作。

下面是一个代码示例，可以更好地说明这一点：

Code Example in CodeSandbox

有没有办法让它与 flex-wrap 一起使用？如果有人能提供帮助，我将不胜感激。

Answer 1

我决定如果最大值很大，最好自己构建一个具有包装能力的。

将它留在此处，以便可能与我有相同问题的人可以使用它。

CustomRating.js

import React, { useState } from 'react'
import { Tooltip } from '@mui/material'
import './CustomRating.css'

function CustomRating({ max, value, onChange, icon, emptyIcon }) {
    const [innerValue, setInnerValue] = useState(value)

    const checkIfIconInsideValue = (index) => {
        return value >= index + 1
    }

    const handleMouseHover = (e, index) => {
        if (e.type === 'mouseenter') {
            setInnerValue(index)
            return
        }
        setInnerValue(value - 1)
    }

    return (
        <Tooltip title={innerValue} placement='top'>
            <div className='custom-rating-main-div'>
                {Array.from({ length: max }).map((elem, index) => {
                    return (
                        <div
                            className={`custom-rating-icon-div ${checkIfIconInsideValue(index) ? 'filled' : ''}`}
                            key={index}
                            onClick={() => onChange(index + 1)}
                            onMouseEnter={(e) => handleMouseHover(e, index)}
                            onMouseLeave={(e) => handleMouseHover(e, index)}
                        >
                            {checkIfIconInsideValue(index) || innerValue >= index ? icon : emptyIcon}
                        </div>
                    )
                })}
            </div>
        </Tooltip>
    )
}

export default CustomRating

CustomRating.css

.custom-rating-main-div {
    display: flex;
    flex-wrap: wrap;
}

.custom-rating-icon-div {
    cursor: pointer;
}

.custom-rating-icon-div.filled > svg {
    fill: #61634f
}

.custom-rating-icon-div > svg {
    fill: rgba(97, 99, 79, 0.5)
}

.custom-rating-icon-div:hover > svg {
    fill: #61634f;
    transform: scale(1.2);
}

正如您可能注意到的那样，这是针对我的问题的，但可以很容易地适应任何情况。

请记住，这是非常粗糙的，可以更新以更好地遵循约定并获得更好的性能，但现在这是我的解决方案

Material UI 评价环绕长值

Material UI Rating wrapping long values

flexbox

reactjs

material-ui