sancho icon indicating copy to clipboard operation
sancho copied to clipboard

Skeleton bug with `css`, `style` and `className`

Open HarryBurns opened this issue 5 years ago • 1 comments

Behavior: "react": "16.12.0", "sancho": "3.5.6"

The docs says that you should use Skeleton like that:

function Example() {
  return (
    <List>
      <ListItem
        interactive={false}
        aria-live="polite"
        aria-busy="true"
        primary={<Skeleton css={{ width: "100px" }} />}
        secondary={<Skeleton />}
        contentBefore={
          <Skeleton
            css={{ width: "3.27rem", height: "3.27rem", borderRadius: "50%" }}
          />
        }
      />
    </List>
  );
}

But in fact, Skeletons above with css property are not working properly. The styles described in css property completely override the Skeleton's own styles (background color, gradient, border, etc.). As a result <Skeleton css={{ width: "100px" }} /> transforms into <span class="css-27wf7g-Skeleton">‌&zwnj</span> where css-27wf7g-Skeleton class contains only width: 100px.

Besides, I'd say that it will be great if Skeleton will support style and className props like other Sancho components do.

HarryBurns avatar Dec 25 '19 03:12 HarryBurns

Good catch. This should be easy to fix. I probably won't have time to look at it until next week, though.

bmcmahen avatar Dec 26 '19 19:12 bmcmahen