react-dropzone 的 StyledDropzone 组件中的悬停效果

问题描述

我想在将鼠标悬停在 react-dropzone (https://react-dropzone.js.org/) 的 StyledDropzone 组件的拖放区域上时设置不透明度变化。我试过包括

opacity: 0.75,'&:hover': {
   opacity: 1.0,},

在此处提到的 baseStyle 对象中 (MaterialUI Custom Hover Style) 但它不起作用。我直接使用 react-dropzone，而不是 material-ui-dropzone。 StyledDropzone 组件的代码：

import React,{useMemo} from 'react';
import {useDropzone} from 'react-dropzone';

const baseStyle = {
  flex: 1,display: 'flex',flexDirection: 'column',alignItems: 'center',padding: '20px',borderWidth: 2,borderRadius: 2,borderColor: '#eeeeee',borderStyle: 'dashed',backgroundColor: '#fafafa',color: '#bdbdbd',outline: 'none',transition: 'border .24s ease-in-out'
};

const activeStyle = {
  borderColor: '#2196f3'
};

const acceptStyle = {
  borderColor: '#00e676'
};

const rejectStyle = {
  borderColor: '#ff1744'
};

function StyledDropzone(props) {
  const {
    getRootProps,getInputProps,isDragActive,isDragAccept,isDragReject
  } = useDropzone({accept: 'image/*'});

  const style = useMemo(() => ({
    ...baseStyle,...(isDragActive ? activeStyle : {}),...(isDragAccept ? acceptStyle : {}),...(isDragReject ? rejectStyle : {})
  }),[
    isDragActive,isDragReject,isDragAccept
  ]);

  return (
    <div className="container">
      <div {...getRootProps({style})}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here,or click to select files</p>
      </div>
    </div>
  );
}

<StyledDropzone />

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）