настроить стиль rc-time-picker - PullRequest
Новая
       16

настроить стиль rc-time-picker

1 голос
/ 15 марта 2019

Я использую пакет rc-time-picker для своего проекта, но у меня проблема с настройкой стиля pop-up моего time picker компонента.Вот скриншот моего компонента:

screenshot of component

Во-первых, мне нужно изменить цвет фона времени 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 для стиля в моем проекте.Я не могу понять, почему это не работает с помощью этого метода.Конечный компонент должен выглядеть следующим образом:

final rendering

Это ссылка для кода и поля: https://codesandbox.io/s/kk8lllwwp7?fontsize=14

Любой ответ будет принят с благодарностью!

1 Ответ

0 голосов
/ 16 марта 2019

Вам необходимо изменить порядок стилизации компонента TimePicker.Пакет styled-components генерирует className, который необходимо применить к TimePicker.В этом случае он будет применен как к className, так и к popupClassName

Рабочий пример :

Edit Styled Time Picker

компонентов / 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;

компонентов / 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;

компоненты / 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;
...