自定义rc-time-picker的样式 [英] customize the style of rc-time-picker

问题描述

我在项目中使用了 rc-time-picker 包，但是自定义弹出窗口时间选择器组件的c $ c>。这是我组件的屏幕截图：

首先，我需要从 light更改时间 li 的时间 item 的背景颜色悬停并选择时间后，将灰色（在屏幕截图中）更改为 #edeffe 。以下是我的代码：

  import从反应中进行反应； 
从 rc-time-picker导入TimePicker； 
 import rc-time-picker / assets / index.css; 
从样式化的组件样式化的导入； 
 
 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 
 minutesStep = {5} 
 {... others} 
 value = {value} 
 use12Hours 
 /> 
）; 
}; 
 
导出默认值DeliTimePicker; 
  

从浏览器中的检查中，我找到了 className 是 rc-time-picker-panel-select-option-selected 。我还必须在项目中使用样式化的组件包进行样式设置。我无法弄清楚为什么无法通过这种方法工作。最终组件应如下所示：

这是codesandbox链接：

组件/TimePicker/index.js

 导入从样式化的组件样式化； 
从 ./TimePicker导入TimePicker； 
 
 const StyledTimePicker = styled（TimePicker）`
& .rc-time-picker-panel-select-option-selected {
 background-color：#edeffe; 
 font-weight：正常； 
} 
 
& .rc-time-picker-clear，
& .rc-time-picker-clear-icon：之后{
 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; 
高度：0； 
} 
} 
`; 
 
导出默认的StyledTimePicker; 
  

components / TimePicker / TimePicker.js

  import从反应进行反应； 
从 prop-types导入PropTypes；从时刻开始的
进口时刻； 
从 rc-time-picker导入TimePicker； 
 import rc-time-picker / assets / index.css; 
 
 const DeliTimePicker =（{className，onChange，value，... rest}）=> （
< TimePicker 
 {... rest} 
 className = {className} 
 popupClassName = {className} 
 showSecond = {false} 
 onChange = {onChange} 
 hideDisabledOptions 
 minutesStep = {5} 
 value = {value} 
 use12Hours 
 /> 
）; 
 
 DeliTimePicker.propTypes = {
 className：PropTypes.string.isRequired，
 onChange：PropTypes.func.isRequired，
值：PropTypes.instanceOf（moment）
}; 
 
导出默认值DeliTimePicker; 
  

components / TimeSelectForm / index.js

  import React，{组件}来自 react；从时刻开始的
进口时刻； 
从 ../TimePicker导入TimePicker； 
 
类TimeSelectForm扩展了组件{
 state = {
 value：moment（）
}; 
 
 handleChange =值=> 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> 
）; 
} 
 
导出默认的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的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！