将类名传递给材料 ui 日期选择器对话框答案

【问题标题】：Pass classname to material ui date-picker dialog将类名传递给材料 ui 日期选择器对话框
【发布时间】：2018-02-14 11:43:35
【问题描述】：

有没有办法将类名传递给 matererial-ui 日期选择器的对话框。

http://www.material-ui.com/#/components/date-picker

Material-ui 的日期选择器接受 classname 作为道具。但是，这会应用于我们要触发date-dialog 的text-field。

我想将class attribute 传递给日期弹出窗口本身。就像是： dialogClassName

如果单击是在日期对话框内的某处完成的，我需要访问并基于此管理我的代码的其他部分。我不知道如何让日期对话框接受classname。

这个问题有点提振，https://github.com/mui-org/material-ui/issues/5329 但传递 dialogClassName 没有得到应用。

【问题讨论】：

我也面临同样的问题。你找到解决办法了吗？
嗨@ArchanaSharma。您无法传递班级名称。我最终使用了一个单独的日期选择器。

标签： reactjs materialize

【解决方案1】：

我通过 DatePicker 代码找到了一个解决方案。您可以将以下道具传递给 DatePicker

<DatePicker>
    PopperProps={{
                  className: classes.desktopView,
                }}
    DialogProps={{
                  className: classes.mobileView,
                }}
</DatePicker>

【讨论】：

【解决方案2】：

如果不修改 DatePicket 组件，恐怕您无法做到这一点（至少在没有一些疯狂的黑客攻击的情况下是这样）。

如果你真的需要这个功能，你可以 fork material-ui 存储库，进行更改并提交拉取请求。或者，在您的项目中，创建一个本地 DatePicker 组件并在那里进行更改，但是这种方法需要您更新您的版本，以防 material-ui 的版本被更新。

【讨论】：

【解决方案3】：

目前还没有解决方案。但是，有一种解决方法可以将 css 类名传递给弹出/对话框容器。使用 onload 函数为 datepicker 的 rightArrowIcon 属性传递一个 img 标签，以调用其父级并注入 css 类。

<DatePicker
   disableToolbar={true}
   variant="inline"  
   inputVariant="outlined"  
   rightArrowIcon={<img src="/images/chevron-right_1.svg" id="datepicker-arrow-right" onLoad={injectTheme}/>}
   leftArrowIcon={<img src="/images/chevron-right_1.svg" style={{transform:"rotate(180deg)"}}/>}    
....
....
....
/>

const injectTheme=()=>{
let node = document.getElementById("datepicker-arrow-right").parentNode.parentNode.parentNode.parentNode.parentNode.parentElement;
    node.classList.add("Css-Class-Name"); 
}

【讨论】：