Can't customize DatePicker calendar background-color

I’m using DatePicker widget(from ‘carbon-components-react’ Carbon X), and I see the calendar part background-color doesn’t match with the page background(The page background is white, and the DatePicker is in this page, its background-color shall be grey to have a contrast with the page background color to follow carbon style), while I find calendar css doesn’t belong to my css layers, and it is in global part, so I can’t change its background-color only in my page.

I tried to set className for the DatePicker in my js, and then set :global .bx–date-picker__calendar { background-color: #f4f4f4; } in corresponding less file under the className, however, it doesn’t work. If I change the calendar’s background-color directly in global part, it will take effect for all DatePickers calendar used in the product, while in other pages, the background-color for that page’s DatePicker calendar may not always be grey the same in my current page. Could someone help to let me know how to resolve it? Or is it a bug for DatePicker widget? Thanks.

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you’re having.

Is this issue related to a specific component?

What did you expect to happen? What happened instead? What would you like to see changed?

What browser are you working in?

What version of the Carbon Design System are you using?

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Steps to reproduce the issue

1. Step one
2. Step two
3. Step three
4. etc.

Please create a reduced test case in CodeSandbox

• Style and vanilla JS: https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/components/examples/codesandbox
• React: https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox

Additional information

• Screenshots or code
• Notes

[AngelaChenBJ]

It resolves my problem. Thanks a lot! @jakubfaliszewski

[jakubfaliszewski]

static is the default value of positon for most of elements. Just add position: relative style to the element your’e appeding DatePicker. For example:

JS

appendTo={document.getElementById("root")}

CSS

#root { position: relative; }