svelte-material-ui icon indicating copy to clipboard operation
svelte-material-ui copied to clipboard

How do I style the Paper component?

Open Hubro opened this issue 3 years ago • 1 comments

** 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?

Hubro avatar Nov 09 '21 17:11 Hubro

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.

mytja avatar Jul 23 '22 19:07 mytja

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

major-mayer avatar Oct 17 '22 13:10 major-mayer