July
July

Reputation: 566

react-datetime-range-picker how to change the inner style set from the library

I'm studying React and right now i'm using this library https://www.npmjs.com/package/react-datetime-range-picker to create a react datetime range. The problem is that now I want to remove the borders from the inputs but I don't know how to override the style provided from the library without modify the library.

import React from "react";
import "react-datetime/css/react-datetime.css";
import DatetimeRangePicker from "react-datetime-range-picker";

export default function App() {
  return <DatetimeRangePicker />;
}

The style inside the input (seen with console developer)

element.style {
    cursor: pointer;
    background-color: white;
    border: 1px solid rgb(226, 226, 226);
}

The codesandbox: https://codesandbox.io/s/modest-villani-63o41?file=/src/App.js:0-206

Is it possible override the style to remove the borderd without modify the library? Thank you in advance

Upvotes: 0

Views: 728

Answers (1)

Ali Taghipour
Ali Taghipour

Reputation: 114

use !important in css styling

element.style {
    cursor: pointer !important;
    background-color: white !important;
    border: 1px solid rgb(226, 226, 226) !important;
}

Upvotes: 1

Related Questions