自定义 rc-time-picker 的样式

Posted 2023-02-22

【中文标题】自定义 rc-time-picker 的样式

【英文标题】：customize the style of rc-time-picker

【发布时间】：2019-08-06 22:49:26

【问题描述】：

我正在为我的项目使用rc-time-picker 包，但我在自定义pop-up 组件的pop-up 样式时遇到问题。这是我的组件的屏幕截图：

首先，我需要将时间li中时间item的背景颜色从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 包进行样式设置。我无法弄清楚为什么它不能通过这种方法工作。最终组件应如下所示：

这是代码框链接：https://codesandbox.io/s/kk8lllwwp7?fontsize=14

任何答案将不胜感激！

【问题讨论】：

&.不需要。

删除了还是不行。

试试添加这个 &:hover background: #hexcode;

他们仍然无法工作。通过在浏览器中检查，此 css 代码甚至没有出现在两种方法的 className 下。

嗯，你能不能创建一个代码沙箱，我去看看

【参考方案1】：

您需要重新排列样式化TimePicker 组件的顺序。 styled-components 包会生成一个className，需要将其应用于TimePicker。在这种情况下，它将同时应用于其className 和popupClassName

工作示例：

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;