更改 dropzone-material-ui 中的段落样式答案

【问题标题】：changing style of paragraph in dropzone-material-ui更改 dropzone-material-ui 中的段落样式
【发布时间】：2019-09-19 05:34:09
【问题描述】：

如何使用 makeStyles 改变 material-ui-dropzone 组件的样式？

我的 useStyle 是：

const useStyles = makeStyles(theme => ({
    DropzoneArea: {                
        fontWeight: 10,
        margin:0,
        padding:0                
    }
}

and in app.js i use this:

<DropzoneArea                                
    acceptedFiles={['image/*']}
    maxFileSize={10000000}
    filesLimit={1}                                                                                   
    dropzoneClass={classes.DropzoneArea}                        
/>

【问题讨论】：

基于对 Dropzone 文档和 src 的第一印象，我希望您必须将其应用于 dropzone 组件。当这个呈现时，你在 html 中看到你的类名吗？（我没有将 src 一直跟踪到 react-dropzone 中的输出；我假设道具被传递下来。）
不，没有：(
这个库没有提供这样做的好方法。它们只为您提供设置容器样式的方法，但您无法从那里设置文本样式。

标签： reactjs material-ui

【解决方案1】：

我不认为你可以用 makeStyles 设置它的样式。

最好的方法是从检查器中获取 p 元素的类名并设置它的样式。它对我有用。

.MuiDropzoneArea-text {
        .....你的风格在这里
}

如果需要，用 "!important" 标记样式。

【讨论】：

【解决方案2】：

您可以使用以下类：

dropzoneParagraphClass="dropzone-text"

在您的 .css 文件中，您可以设置文本样式：

.dropzone-text {
    font-size: 100px !important; /* or something */
}

【讨论】：