I need to apply a custom style to the disabled the antd range picker.

I have added className to the component but the style isn’t changing.

                        <RangePicker
                          className="my-range"
                          allowClear={false}
                          bordered={true}
                          format="HH:mm"
                          style={{ width: "100%" }}
                        />

Styles Css:

.ant-picker .ant-picker-range .ant-picker-disabled{
  .my-range {
    background-color: #008000;
  }
}

Also tried,

.my-range {
    .ant-picker .ant-picker-range {
      .ant-picker-disabled{
        background-color: #008000;
        }
      }
    }

Codesandbox : https://codesandbox.io/s/basic-antd-4-20-7-forked-g5ee2t?file=/demo.js