score:0
as an fyi, so it is not the most obvious responses, but just in case this is your situation, my issue was that i had changed my windows 10 personalise settings to use contrast and my blue bar in my react app disappeared! after a while of searching, i switched it off and my bar was back.
score:1
looks like you're having js-comments (//
) in your jsx code. that'll make stuff break.
if you want to comment something out in jsx, you have to escape into js with curly brackets and then use multi line comments (/* comment */
) - like so:
render() {
return (
<div>
{/* <button>commented out button</button>*/}
</div>
);
}
score:1
remove text from between the textfield
tags. also wrap your code in your render method between muithemeprovider.
this worked for me.
render(){
return (
<muithemeprovider>
<div>
<div>
<textfield
hinttext="username"
/><br/>
<textfield
hinttext="password"
/><br/>
<raisedbutton label="login" primary={true} />
</div>
<div>
<textfield></textfield>
</div>
</div>
</muithemeprovider>
);
}
score:2
to render material-ui
components you need to wrap them in muithemeprovider
.
as per doc:
beginning with v0.15.0, material-ui components require a theme to be provided. the quickest way to get up and running is by using the muithemeprovider to inject the theme into your application context.
how to use these components?
first use this line to import muithemeprovider
:
import muithemeprovider from 'material-ui/styles/muithemeprovider';
use this render method:
render(){
return (
<muithemeprovider muitheme={getmuitheme()}>
<div>
<div>
<textfield
hinttext="username"
/>
<br/>
<textfield
hinttext="password"
/>
<br/>
<raisedbutton label="login" primary={true} />
</div>
<div>
<textfield/>
</div>
</div>
</muithemeprovider>
);
}
if you are using material-ui components across the project then no need to use muithemeprovider
on each page, you also include it globally. include this in your router or put this line on main page of the application.
one more thing you are only importing the injecttapeventplugin
, you need to initialise that also. put this line in this component after importing:
injecttapeventplugin();
Source: stackoverflow.com
Related Query
- Material UI components not working in React
- Material UI components not working in React JS project
- Using 'ref' on React Styled Components is not working
- Select is not working onClick IconComponent(dropdown-arrow) in react material ui
- Media queries not working with styled components in React App
- Limiting table selects not working - material UI table - react
- 100% height not working for Drawer, Material Design React
- Material UI AppBar with React Router 4 Implementation not working
- React three fiber Shadow material not working
- WithStyles not working in Material UI for React
- React - Material UI - TextField controlled input with custom input component not working properly losing focus
- Slider inside of Modal is not working - React + Material UI
- Material UI React Table onCellClick not working on TableRow
- Not able to add, update, delete rows in material table react using class based component. Previously it was working with functional component
- React HOC working on some but not other components
- React Material UI TextField FormHelperTextProps Styling Not Working
- Complex nested components on React not working
- React + Material UI + Typescript + Webpack + SSR not working
- Material Design Components Toggle effect not working
- VS Code + React + JSX + Components props intellisense is not working
- MenuItem with dynamic value is not working in Material UI React
- react router 4 nested components not working properly
- React transition group is not working when using a function to out components
- transition effect is not working for mobile menu in react js with styled components
- React context state sharing not working in sibling components
- map function in javascript not working properly for React components
- React styled components - target first-child and last-child not working
- CSS Transition not working with react and styled components
- Material UI popover not working with react class component
- Material UI and React &hover selector not working
More Query from same tag
- REACT env variables
- React i18next and correct way of changing language
- JS/React useState value not updating before function call?
- How to format the value of a checkbox Field using React Final Form Field Array?
- How to pass a prop to {children} in React?
- How to make button content highlight animation?
- Looping Audio List with React.js
- How to show/ hide components in react by clicking sibling component
- Pass quoted variable to function in React
- Efficient way to request back-end for data on input change
- How to test window.location.assign using react wrapper?
- External API issue in production - React.js
- React Unknown Prop 'onSearch'
- GAE files blocked due to mimetype/unknown url handler type for js files with multiple .'s
- I can't execute a props parent method inside an event handler
- Props is a deprecated symbol in React with Typescript
- Create personalized sessions url using React
- React Bootstrap Popover in Overlay Trigger doesn't disappear when logical parent is removed
- electron-react-boilerplate :sub window on clicking a button
- React native - Highlight a TextInput if it's empty on form submit
- Fetching Data on useEffect
- React - Remove image based on position within window
- ES6 & Webpack: import not working
- DirectionsRenderer for origin and destination as props
- React Router V4 - 404 error on refresh - Nginx issue?
- Centering ant design carousel on screen
- I get two errors that I could not solve in return ESLint and destructing
- Remove a dynamic property in the reducer
- ReactJS - Have a "main" component that doesn't own it's children?
- Typescript `could be instantiated with a different subtype of constraint '{}'` with react-final-form