Rsuite datepicker formatting

Question

I am working with datepicker from React rsuite library . I want to change the default blue color or totally remove it .

/* Style the entire input group */
 .rs-picker-input-group 
{     border: 1px solid #ccc; 
 /* Set the border color */    
 border-radius: 1px;       
/* Set the rounded corners */   
 display: flex;
    align-items: center;
  }

  .rs-picker-input-group:focus-within{
    outline:none;
    border: 1px solid #eb6c0b !important; 
    box-shadow: none;
}

I cant remove the default blue color though i have tried to remove boxshadow and outline to none. I just want to have orange on focus. Moreover, I want to edit default padding of the field. your text

Answer 1

Rsuitejs has provided CSS Variables for customization. You can simply change those variable values to customize the styling.

Below is an example code:

A component using DatePicker:

import "rsuite/dist/rsuite.min.css";
import "./styles.css";
import { DatePicker } from "rsuite";

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

A CSS file overriding css varibles, styles.css:

:root {
  --rs-primary-500: #eb6c0b;
}

And, to change the padding of input element, you can provide a custom className prop to DatePicker:

<DatePicker
    className="custom-rs-datepicker"
/>

And use that to select and change the padding of input:

.custom-rs-datepicker .rs-picker-input-group input {
  padding-left: 5px;
}

Here is a demo on codesandbox.