CSS customization in React Timepicker component

21 Feb 20263 minutes to read

The TimePicker component provides extensive CSS customization through the cssClass property. Use this property to apply custom CSS classes that control the textbox, popup button, and popup list appearance.

The following sample demonstrates customization of text appearance, hover states, and active states using the e-custom-style class. Below is the complete list of CSS classes available for customizing the TimePicker component:

Class Name	Description
e-time-wrapper	Applied to TimePicker wrapper element.
e-timepicker	Applied to input element and TimePicker popup element.
e-time-wrapper.e-timepicker	Applied to input element only.
e-input-group-icon.e-time-icon	Applied to popup button.
e-float-text	Applied to floating label text element.
e-popup	Applied to popup element.
e-timepicker.e-popup	Applied to TimePicker popup element only.
e-list-parent	Applied to popup UL element.
e-timepicker.e-list-parent	Applied to TimePicker popup UL element only.
e-list-item	Applied to LI elements.
e-hover	Applied to LI element hovering time.
e-active	Applied to active LI element.

index.jsx

// import the ripple effect
import { enableRipple } from '@syncfusion/ej2-base';
// import the timepicker
import { TimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";
// enable ripple effect
enableRipple(true);
export default class App extends React.Component {
    render() {
        return <TimePickerComponent id="timepicker" cssClass="e-custom-style" placeholder="Select a Time"/>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('timer'));

index.tsx

// import the ripple effect
import { enableRipple } from '@syncfusion/ej2-base';
// import the timepicker
import { TimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";

// enable ripple effect
enableRipple(true);

export default class App extends React.Component<{}, {}> {
    public render() {
        return <TimePickerComponent id="timepicker" cssClass="e-custom-style" placeholder="Select a Time" />
    }
};
ReactDOM.render(<App />, document.getElementById('timer'));