Rsuite 日期选择器格式

Question

我正在使用 React rsuite 库中的 datepicker 。我想更改默认的蓝色或完全删除它。

/* 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;
}

尽管我尝试将盒子阴影和轮廓删除为无，但我无法删除默认的蓝色。我只是想让焦点上有橙色。此外，我想编辑字段的默认填充。

your text

Answer 1

Rsuitejs提供了CSS变量用于定制。您只需更改这些变量值即可自定义样式。

下面是示例代码：

使用

DatePicker

的组件：

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

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

覆盖 CSS 变量的 CSS 文件，

styles.css

:

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

这里是 codesandbox 的演示。