Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[question] No vendor prefixes generated when using withStyles

See original GitHub issue

When I make use of the built-in withStyles HOC I don’t get the automatic vendor prefixing despite the following pieces of documentation claiming otherwise:

When should I use inline-style vs withStyles()? it says that we can make use of withStyles in order to gain the benefit of vendor prefixing.
CSS-in-JS states that Material UI uses JSS at its core with the jss-preset-default which includes the jss-vendor-prefixer plugin.

I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Vendor prefixes should be generated for certain style rules like display: 'flex' or transform: 'translateX(100px)'

Current Behavior

No vendor prefixes are generated

Steps to Reproduce (for bugs)

https://codesandbox.io/s/985r6o933w

Inspect the element Test
Notice that no vendor prefixes are generated when looking at the class .ExampleContainer-root-1

Your Environment

Tech	Version
Material-UI	1.0.0 beta 21
React	16.1.1
browser	Chrome 62

Issue Analytics

State:
Created 6 years ago
Comments:7 (5 by maintainers)

Top GitHub Comments

1reaction

oliviertassinaricommented, Feb 13, 2019

@depiction I confirm the problem, we miss the clipPath prefix on Safari: https://codesandbox.io/s/o40xvvrq25.

Could you open an issue on JSS side? cc @kof.

0reactions

acejusto11commented, Aug 13, 2019

Hi, Is the issue still exist? We are using version 4.0.2. thank you

Top Results From Across the Web

[question] No vendor prefixes generated when using withStyles

When I view my page in Safari and inspect that code, there is no vendor prefix for clip-path. I'm using Material UI core...

YUI3 (JS) setStyle using vendor prefixes - Stack Overflow

Use camel case. When DOM scripting, style properties should always be set using camelCase. Webkit is lax about that and violates spec. Y.one('#mydiv')....

How To Style React Components | DigitalOcean

In this tutorial, you'll learn three different ways to style React components: plain Cascading Style Sheets (CSS), inline styles with ...

Untitled

Created with inspiration from Google's Material Design, ... makeStyles: fix sequence prefix not to collide with CSS modules-generated classes #19724.

at-rule-no-vendor-prefix - Stylelint

Disallow vendor prefixes for at-rules. ... However, it will not remove duplicate at-rules produced when the prefixes are removed. You can use Autoprefixer ......