Question

有没有办法将classname传递给matererial-ui datepicker的对话框。

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

Material-ui的datepicker接受classname作为道具。但是，这会应用于我们想要触发text-field的{{1}}。

我想将date-dialog传递给日期弹出窗口。就像是： class attribute

如果点击是在日期对话框内的某处完成的，我想要访问，并根据它来管理我的代码的其他部分。我无法弄清楚如何使日期对话框接受dialogClassName。

这个问题有点提升，https://github.com/mui-org/material-ui/issues/5329但是传递classname并未获得应用。

Answer 1

我担心如果不修改DatePicket组件就不能这样做（至少没有一些狂野的黑客攻击）。

如果您确实需要此功能，可以使用fork-ui存储库，进行更改并提交拉取请求。或者，在您的项目中，创建一个本地DatePicker组件并在那里进行更改，但是这种方法要求您在更新材料-ui版本的情况下更新您的版本。

Answer 2

目前还没有解决方案。但是，有一种解决方法可以将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"); 
}

将classname传递给material ui date-picker对话框

2 个答案: