自定义rc-time-picker的风格

Question

我使用rc-time-picker包为我的项目，但我有问题定制我的pop-up组件的time picker的风格。这是我的组件的屏幕截图：

首先，我需要在item（在屏幕截图中）将时间li的时间背景颜色更改为light grey，当时间被悬停和选择时。以下是我的代码：

#edeffe

从浏览器中的检查，我发现选中的每个项目的

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;

是className。我还必须在我的项目中使用rc-time-picker-panel-select-option-selected包进行样式设计。我无法弄清楚为什么它不能通过这种方法工作。最终组件应如下所示：

styled component

这是codesandbox链接：

任何答案将不胜感激！

Answer 1

您需要重新排列样式化https://codesandbox.io/s/kk8lllwwp7?fontsize=14组件的顺序。 TimePicker包生成一个需要应用于styled-components的className。在这种情况下，它将适用于它的TimePicker和它的className

工作范例：

popupClassName

组件/ TimePicker / index.js

组件/ TimePicker / TimePicker.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;

组件/ TimeSelectForm / index.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;