Skip to content
Advertisement

TextField Style using styed-components and Material-UI withStyles

Here is Material-UI TextField style using withStyles from Material-UI itself:

JavaScript

and it works perfectly.

Is there any way to make the same style using styled-components?

I tried this:

JavaScript

but it is not making the same style.

I might be missing some extra syntax, any help appreciated!

Advertisement

Answer

Below is an example showing the correct syntax for the equivalent using styled-components.

It fixes the following syntax issues:

  1. You don’t need to surround the styles with .MuiTextField-root {...}. The root level is the level at which the class name from styled-components will be applied. Surrounding the styles with .MuiTextField-root {...} will cause it to not work since it will look for a descendant of the TextField root element with that class (but the class is on the TextField root element itself).

  2. You need to use CSS syntax instead of the JS object syntax when providing a template literal to styled-components. This means:

    • no : prior to the brackets for a style rule
    • no quotes around the color string white
    • use the CSS property names with dashes rather than the camelCase versions for JS objects (e.g. border-color instead of borderColor)
JavaScript

Edit styled-components TextField

User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement