自定义 rc-time-picker 的样式

2022-01-19 00:00:00 reactjs frontend javascript css timepicker

我正在为我的项目使用 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;

相关文章