From 77b10d25bbbc79ea3c4fe0f54c311fe4ccc096ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Thu, 2 Dec 2021 13:15:58 +0100 Subject: [PATCH] [docs] Explain how Paper changes shade in dark mode (#30003) Co-authored-by: Benny Joo --- docs/src/pages/components/paper/paper.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/src/pages/components/paper/paper.md b/docs/src/pages/components/paper/paper.md index fb7629c35c523b..4d0cfa43838fd2 100644 --- a/docs/src/pages/components/paper/paper.md +++ b/docs/src/pages/components/paper/paper.md @@ -27,3 +27,7 @@ If you need an outlined surface, use the `variant` prop. The elevation can be used to establish a hierachy between other content. In practical terms, the elevation controls the size of the shadow applied to the surface. In dark mode, raising the elevation also makes the surface lighter. {{"demo": "pages/components/paper/Elevation.js", "bg": "inline"}} + +The change of shade in dark mode is done by applying a semi-transparent gradient to the `background-image` property. +This can lead to confusion when overriding the styles of `Paper`, as setting just the `background-color` property will not affect the elevation-related shading. +To ignore the shading and set the background color that is not affected by elevation in dark mode, override the `background` property (or both `background-color` and `background-image`).