search

hperrin / svelte-material-ui

Svelte Material UI Components
https://sveltematerialui.com/
Apache License 2.0
3.32k stars 284 forks source link

How do I style the Paper component? #358

Open Hubro opened 2 years ago

Hubro commented 2 years ago

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?

mytja commented 2 years ago

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.

major-mayer commented 2 years ago

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