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!
See Question&Answers more detail:os