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.
Behavior:
"react": "16.12.0",
"sancho": "3.5.6"
The docs says that you should use Skeleton like that:
But in fact, Skeletons above with
cssproperty are not working properly. The styles described incssproperty 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>wherecss-27wf7g-Skeletonclass contains onlywidth: 100px.Besides, I'd say that it will be great if Skeleton will support
styleandclassNameprops like other Sancho components do.