Using @material-ui/styled-engine-sc, TextField with label throws error
See original GitHub issueUsing @material-ui/styled-engine-sc the <TextField> component errors if provided with a label
TypeError: Cannot read property 'main' of undefined
node_modules/@material-ui/core/FormLabel/FormLabel.js:49
- [x ] The issue is present in the latest release.
- I have searched the issues of this repository and believe that this is not a duplicate.
Current Behavior 😯
Component throws an error
Expected Behavior 🤔
Render text field
Steps to Reproduce 🕹
I’m using @material-ui/core 5.0.0-alpha.34 and @material-ui/styled-engine-sc. With the code sandbox it is not able to create this setup,.
import React from "react";
import {
TextField,
ThemeProvider
} from "@material-ui/core";
import { createTheme, responsiveFontSizes } from "@material-ui/core/styles";
let theme = createTheme();
export default function Demo() {
return <ThemeProvider theme={theme}><TextField label="Filled" variant="filled" /></ThemeProvider>;
}
Issue Analytics
- State:
- Created 2 years ago
- Comments:8 (8 by maintainers)
Top Results From Across the Web
Using @material-ui/styled-engine-sc, TextField with label ...
Using @material-ui/styled-engine-sc, TextField with label throws error #26438 ; Current Behavior ; Expected Behavior ; Steps to Reproduce.
Read more >How to use Material-ui@next TextField error props
Using a react component state, one can store the TextField value and use that as an indicator for an error. Material-UI exposes the...
Read more >React Text Field component - Material UI - MUI
The TextField wrapper component is a complete form control including a label, input, and help text. It comes with three variants: outlined (default), ......
Read more >styled() - MUI System
This utility is built on top of the styled() module of @mui/styled-engine and provides additional features. Import path. You can use the utility...
Read more >Breaking changes in v5, part two: core components - Material UI
The label prop now fulfills the same purpose, using the CSS layout instead of JavaScript measurements to render the gap in the outlined...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@mnajdova I fixed the example repo to make it work. In case anyone else has the same problem: https://github.com/florianbepunkt/mui-example-26438
Here is a working example of it using
styled-components
-> https://codesandbox.io/s/wandering-voice-scuj1?file=/src/index.js