问题描述
我正在为我的项目使用 rc-time-picker 包，但是我在自定义 time picker<的 pop-up 样式时遇到了问题/代码>组件.这是我的组件的屏幕截图:
首先，我需要将时间 li 中时间 item 的背景颜色从 light gray (在屏幕截图中)更改为#edeffe 当时间被悬停和选择时.以下是我的代码:
从react"导入反应；从rc-time-picker"导入 TimePicker；导入rc-time-picker/assets/index.css"；从样式组件"导入样式；const StyledTimePicker = styled(TimePicker)`&.rc-time-picker-panel-select-option-selected{背景色:#edeffe !important;}`;const DeliTimePicker = ({ value, onChange, ...others }) =>{返回 (<风格化时间选择器showSecond={假}onChange={onChange}隐藏禁用选项分步={5}{...其他}价值={价值}使用12小时/>);};导出默认 DeliTimePicker；通过在浏览器中的检查，我发现选择时每个项目的 className 是 rc-time-picker-panel-select-option-selected.我还必须在我的项目中使用 styled component 包进行样式设置.我无法弄清楚为什么它不能通过这种方法工作.最终组件应如下所示:
这是代码框链接:
components/TimePicker/index.js
从styled-components"导入样式；从./TimePicker"导入 TimePicker；const StyledTimePicker = styled(TimePicker)`&.rc-time-picker-panel-select-option-selected {背景颜色:#edeffe；字体粗细:正常；}&.rc-time-picker-clear,&.rc-time-picker-clear-icon:after {字体大小:15px；}&.rc-time-picker-panel-select,&.rc-时间选择器输入，&.rc-time-picker-panel-input {字体家族:Consolas"，无衬线；字体大小:16px；::-webkit-滚动条 {宽度:0；高度:0；}}`;导出默认 StyledTimePicker；components/TimePicker/TimePicker.js
从react"导入反应；从prop-types"导入 PropTypes；从时刻"导入时刻；从rc-time-picker"导入 TimePicker；导入rc-time-picker/assets/index.css"；const DeliTimePicker = ({ className, onChange, value, ...rest }) =>(<时间选择器{...休息}类名={类名}popupClassName={类名}showSecond={假}onChange={onChange}隐藏禁用选项分步={5}价值={价值}使用12小时/>);DeliTimePicker.propTypes = {类名:PropTypes.string.isRequired，onChange: PropTypes.func.isRequired,值:PropTypes.instanceOf(moment)};导出默认 DeliTimePicker；components/TimeSelectForm/index.js
import React, { Component } from "react";从时刻"导入时刻；从../TimePicker"导入 TimePicker；类 TimeSelectForm 扩展组件 {状态 = {值:时刻()};handleChange = 值 =>this.setState({ value });处理提交 = e =>{e.preventDefault();警报(时刻(this.state.value).format(hh:mm a"))；};渲染 = () =>(<form onSubmit={this.handleSubmit}><TimePicker 值={this.state.value} onChange={this.handleChange}/><br/><button type="submit">提交</button></表格>);}导出默认的 TimeSelectForm；I am using rc-time-picker package for my project, but I have problem with customizing the style of pop-up of my time picker component. Here is the screenshot of my component:
Firstly, I need to change the background-color of time item in the time li from light grey (in the screenshot) to #edeffe when time is hovered and selected . The following is my code:
import React from "react";
import TimePicker from "rc-time-picker";
import "rc-time-picker/assets/index.css";
import styled from 'styled-components';
const StyledTimePicker = styled(TimePicker)`
&.rc-time-picker-panel-select-option-selected{
background-color: #edeffe !important;
}
`;
const DeliTimePicker = ({ value, onChange, ...others }) => {
return (
<StyledTimePicker
showSecond={false}
onChange={onChange}
hideDisabledOptions
minuteStep={5}
{...others}
value={value}
use12Hours
/>
);
};
export default DeliTimePicker;
From the inspection in the browser, I find the className of each item when selected is rc-time-picker-panel-select-option-selected. I also have to use styled component package for styling in my project. I can't figure out why it doesn't work via this method. The final component should look like this:
This is the codesandbox link: https://codesandbox.io/s/kk8lllwwp7?fontsize=14
Any answer would be greatly appreciated!
You need to rearrange the order in which you're stylizing your TimePicker component. The styled-components package generates a className that needs to be applied to the TimePicker. In this case, it'll be applied to both its className and its popupClassName
Working example:
components/TimePicker/index.js
import styled from "styled-components";
import TimePicker from "./TimePicker";
const StyledTimePicker = styled(TimePicker)`
& .rc-time-picker-panel-select-option-selected {
background-color: #edeffe;
font-weight: normal;
}
& .rc-time-picker-clear,
& .rc-time-picker-clear-icon:after {
font-size: 15px;
}
& .rc-time-picker-panel-select,
& .rc-time-picker-input,
& .rc-time-picker-panel-input {
font-family: "Consolas", sans-serif;
font-size: 16px;
::-webkit-scrollbar {
width: 0;
height: 0;
}
}
`;
export default StyledTimePicker;
components/TimePicker/TimePicker.js
import React from "react";
import PropTypes from "prop-types";
import moment from "moment";
import TimePicker from "rc-time-picker";
import "rc-time-picker/assets/index.css";
const DeliTimePicker = ({ className, onChange, value, ...rest }) => (
<TimePicker
{...rest}
className={className}
popupClassName={className}
showSecond={false}
onChange={onChange}
hideDisabledOptions
minuteStep={5}
value={value}
use12Hours
/>
);
DeliTimePicker.propTypes = {
className: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
value: PropTypes.instanceOf(moment)
};
export default DeliTimePicker;
components/TimeSelectForm/index.js
import React, { Component } from "react";
import moment from "moment";
import TimePicker from "../TimePicker";
class TimeSelectForm extends Component {
state = {
value: moment()
};
handleChange = value => this.setState({ value });
handleSubmit = e => {
e.preventDefault();
alert(moment(this.state.value).format("hh:mm a"));
};
render = () => (
<form onSubmit={this.handleSubmit}>
<TimePicker value={this.state.value} onChange={this.handleChange} />
<br />
<button type="submit">Submit</button>
</form>
);
}
export default TimeSelectForm;
这篇关于自定义 rc-time-picker 的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！