如何解决传递道具时 MUI MakeStyles 未按预期工作 DatePickerButton.jsxStyles.jsDatePickerButton.jsxStyles.js
我一直在研究使用 React 和 Material-ui 制作的范围日期选择器。我有一个原子组件(按钮),它在某些日期值更改的日期之后获得一些样式。
不是最好的代码,但现在我只想完成工作,问题是我想用类来做这件事,但只有在为它分配样式时才能按预期工作,如果我将 props 传递给 {{1 }}它开始做奇怪的事情。
将 props 传递给 useStyles
- 悬停按钮
- 点击按钮 - 开始日期
- 范围效果,悬停在 16 日
- 第 16 次点击 - 结束日期
- 悬停在 14 日
- 如果选择了开始日期但未选择结束日期,则会出现奇怪的行为
DatePickerButton.jsx
useStyles(props)
Styles.js
import React from 'react';
import { Button } from '@material-ui/core';
import PropTypes from 'prop-types';
import fcc from 'font-color-contrast';
import { colors } from 'UI/res/colors';
import { useStyles } from './styles';
const DatePickerDisplayButton = ({
children,actualDate,displayDate,selectedDates: {
start: startDate,end: endDate
},focusedDate,type,index,onMouseEnter,onRangeChange,multiple,...rest
}) => {
// function expression that sets backgroundColor and color
// depending on dates
const getRangeBackgroundColor = () => {
const color = fcc(colors.main.red.original);
if (
displayDate === startDate ||
displayDate === endDate ||
(displayDate === focusedDate && !endDate)
) {
return { color,backgroundColor: colors.main.red.original };
} else if (
(displayDate > startDate && displayDate < endDate) ||
(displayDate > startDate && displayDate < focusedDate && !endDate) ||
(displayDate < startDate && displayDate > focusedDate && !endDate)
) {
return { color,backgroundColor: colors.main.red.softer };
}
return null;
};
const classes = useStyles({
index,// pass colors object to useStyles to get in props
color: getRangeBackgroundColor()
});
return (
<Button
type="contained"
onMouseEnter={onMouseEnter(displayDate)}
onClick={onRangeChange(displayDate,type)}
className={classes.calendarButton}
{...rest}
>
{children}
</Button>
);
};
带样式道具
这是所需的行为,唯一改变的是我将 import { makeStyles } from '@material-ui/core';
import { colors } from 'UI/res/colors';
export const useStyles = makeStyles(() => ({
calendarButton: {
width: 'calc(100% / 7)',minWidth: 'calc(100% / 7)',borderRadius: 0,margin: 0,borderTop: `1px solid ${colors.main.red.soft}`,borderLeft: `1px solid ${colors.main.red.soft}`,borderBottom: ({index,multiple}) => (index + 1 < multiple && index + 1 > multiple - 7) ? `1px solid ${colors.main.red.soft}` : null,borderRight: ({index}) => ((index + 1) % 7) === 0 ? `1px solid ${colors.main.red.soft}` : null,backgroundColor: ({color}) => color?.backgroundColor,color: ({color}) => color?.color
}
}));
传递给我的按钮 getRangeBackgroundColor()
属性。
- 按钮悬停
- 点击按钮 - 选择开始日期
- 完成日期悬停
- 已选择完成日期 - 如果在选择两个日期时将鼠标悬停,则此日期不会更改,如果未选择完成日期,则不会出现奇怪的行为
DatePickerButton.jsx
style
Styles.js
import React from 'react';
import { Button } from '@material-ui/core';
import PropTypes from 'prop-types';
import fcc from 'font-color-contrast';
import { colors } from 'UI/res/colors';
import { useStyles } from './styles';
const DatePickerDisplayButton = ({
children,...rest
}) => {
const classes = useStyles({
index,multiple
});
const getRangeBackgroundColor = () => {
const color = fcc(colors.main.red.original);
if (
displayDate === startDate ||
displayDate === endDate ||
(displayDate === focusedDate && !endDate)
) {
return { color,backgroundColor: colors.main.red.softer };
}
return null;
};
return (
<Button
type="contained"
onMouseEnter={onMouseEnter(displayDate)}
onClick={onRangeChange(displayDate,type)}
className={classes.calendarButton}
style={getRangeBackgroundColor()}
{...rest}
>
{children}
</Button>
);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。