question-mark
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.

Using @material-ui/styled-engine-sc, TextField with label throws error

See original GitHub issue

Using @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:closed
  • Created 2 years ago
  • Comments:8 (8 by maintainers)

github_iconTop GitHub Comments

1reaction
florianbepunktcommented, Jun 4, 2021

@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

0reactions
mnajdovacommented, Jun 1, 2021

Here is a working example of it using styled-components -> https://codesandbox.io/s/wandering-voice-scuj1?file=/src/index.js

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found