Reputation: 10575
I have found that if I add the line -webkit-appearance: none;
to the root div
for the Chip
, the problem corrects itself. However, that is automatically being added by inline-styler
or something, and I really wish it would stop adding vendor prefixes for reasons not just including this one.
Any more insight is appreciated.
I have a really odd problem with the material-ui
Chip
Component. It's pretty self-explanatory if you look below at the same Chip
at different zoom levels:
I've never seen anything like this before and I am curious as to what it could be. FYI, it is the same problem whether using Chrome
or Safari
or Firefox
, although on some browsers (notably Safari
) it doesn't work at any zoom level. Note that I am testing on OS X.
The code for the Chip
is:
<Chip
key={`ffeffef`}>
<Avatar size={32}>B</Avatar>
Blah blah
</Chip>
When I do not use the Avatar
it sometimes works but I think it only appears like it does when it "hot loads" the component, not after a fresh refresh. It is a very odd problem.
The CSS does not indicate it should have a border as it does.
Any help is appreciated.
Upvotes: 2
Views: 768
Reputation: 12862
This happens, because <Chip>
component renders a div
with type="button"
attribute, but in last versions of materialize-css
there is set a rule:
[type=reset], [type=submit], button, html [type=button] {
-webkit-appearance: button;
}
I've fixed it by setting:
[type=button]{
-webkit-appearance: none
}
In a global css file.
By the way, no only <Chip>
component is affected, I've run in this issue with <ListItem>
. Searching issues on github, I saw that people complain about other components too. Hope maintainers will fix this soon.
Upvotes: 1