svelte-material-ui
svelte-material-ui copied to clipboard
How do I style the Paper component?
** Is this for an existing documentation file? **
https://sveltematerialui.com/demo/paper
** What needs improvement? **
I'm using the Paper component just as documented, but it's completely flat and white. No matter which color I apply or which elevation I set, it's flat and white, no border and no shadow.
"Paper" also doesn't seem to be a MDC component:
https://github.com/material-components/material-components-web/tree/v11.0.0/packages
So I can't find any suggestions on how to style it there.
How do I style the Paper component so it looks like the one in the documentation?
I also had the problem, that the dark mode wouldn't apply to Paper, then I looked at site's source code and found out, I'm missing these two packages, which I installed using npm (it might be possible, that only one package was required, I tested it only with both):
npm i -D @smui/menu-surface
npm i -D @material/elevation
I hope this helps.
This is far from ideal, but in my case i needed to remove the padding of the accordions content component, which internally uses the paper component. I did this by adding the following to the theme scss file
div.smui-accordion div.smui-paper__content {
padding-left : 0px !important;
padding-right : 0px !important;
}