Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Skeleton bug with css, style and className #48

Open
HarryBurns opened this issue Dec 25, 2019 · 1 comment
Open

Skeleton bug with css, style and className #48

HarryBurns opened this issue Dec 25, 2019 · 1 comment

Comments

@HarryBurns
Copy link

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.

@bmcmahen
Copy link
Owner

bmcmahen commented Dec 26, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants