sancho
sancho copied to clipboard
Skeleton bug with `css`, `style` and `className`
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.
Good catch. This should be easy to fix. I probably won't have time to look at it until next week, though.