I am using Material UI next branch i want to use the table component and i want to change the style of the TableHead Component.
My idea was to wrap the TableHead with MyTableHead and add my own style to override the current style.
my code(based on this Composition):
import React from 'react';
import injectSheet from 'react-jss'
import {
TableHead,
} from 'material-ui/Table';
const styles = {
th: {
fontSize:'20px',
},
}
const _MyTableHead = (props) => {
return (
<TableHead className={props.classes.th} {...props}>
{props.children}
</TableHead>
);
};
_MyTableHead.muiName = 'TableHead'
const MyTableHead = injectSheet(styles)(_MyTableHead);
export {MyTableHead}
This does not work:
1. my style is overrided by the original style
2. i get an error in the browser js console:
Warning: Unknown props sheet, classes on tag. Remove these
props from the element. For details, see
https://facebook.github.io/react/warnings/unknown-prop.html
in thead (created by TableHead)
in TableHead (at table.js:15)
in _MyTableHead (created by Jss(_MyTableHead))
I think i am not doing it right, any idea ?
The way to customize components in the next branch is not documented yet.
This is how it can be done:
import React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {createMuiTheme} from 'material-ui/styles/theme'
import Button from 'material-ui/Button';
const muiTheme = createMuiTheme({
overrides:{
MuiButton:{
root:{
fontSize: 20,
}
}
}
});
class Main extends React.Component {
render() {
// MuiThemeProvider takes the theme as a property and passed it down the hierarchy
// using React's context feature.
return (
<MuiThemeProvider muiTheme={muiTheme}>
<Button raised>Default</Button>
</MuiThemeProvider>
);
}
}
export default Main;
Example Class from MUINext
Material UI regenerates new classes upon render, so you will never be able to override any one class with a preset class.
Their class name will look something like MuiRoot-tableHead-23. The last number is random.
Find the specific class that is overriding your class, and then use
[class*=MuiRoot-tableHead]{
your css settings
}
If you have a theme file already setup, I'd suggest going with what yossi said. Otherwise, you can manually override it using this method.
Related
I'm new to react and I'm trying to using makestyles and this is how :
in Header.jsx :
import React from "react";
import UseStyles from "./Header_style";
function Header() {
const classes =UseStyles();
return (
<div className={"Main-Header"}>
<div className={"Header-Logo"}>
<div className={classes.test}>test</div>
</div>
</div>
);
};
export default Header;
and style.js :
import {makeStyles} from '#material-ui/styles';
const UseStyles = makeStyles(theme=>({
test: {
backgroundColor: '#BDC3C7',
color :'red !important',
widtH : '18%'
},
}));
export default UseStyles;
but I'm getting folwing error:
×
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
*edit:
This is how I'm using Header :
import React, { Component } from 'react'
import Header from './component/heder/Header.jsx';
class App extends Component {
constructor() {
super();
this.state = {
monsters: [],
searchField: ''
};
}
render() {
return (
<Header/>
);
}
}
export default App;
and another thing, I'm getting following error too :
When you place your Header component in the return or render of a parent component make sure you use <Header /> and not {Header}
additionally if that's not the problem you can check this link which is the official react thread on that error.
Also posting how you render the component that is throwing the error would be very helpful.
Edit* Additionally you don't need to call makeStyles with a function. Since you are not using the theme, you can just call makeStyles with an object like this
const useStyles = makeStyles({
test: {
background: 'white',
width: '100%'
}
});
EDIT and additional answers:
Here's a snippet from MUI's official page on styles:
The way you import makeStyles:
import { makeStyles } from '#material-ui/styles
If you import this way you have to have applied the #material-ui/styles module.
If instead in your package.json you use '#material-ui/core and haven't installed #material-ui/styles you could be getting that error because you don't have the module #material-ui/styles.
If you just have #material-ui/core you can still import makeStyles without installing the standalone #material-ui/styles it is all included in #material-ui/core.
Simply import it like this instead:
import { makeStyles } from '#material-ui/core/styles'
everybody, I've found the solution!
have to use withStyles.
Trying to address all h1 elements in a child component but the class styling bubbles up to address all h1 elements in entire DOM. How restrict styling to component to which stylesheet is imported?
```
import React, { Component } from "react";
import "../styles/principlesInAoL.css";
export default class PrinciplesInAoL extends Component {
render() {
return <h1>Principles in Areas of Life</h1>;
}
}
```
& Beginning of parent component code:
```
import React, { Component } from "react";
import AoLDescription from "./aoLDescription";
import MetaPrinciple from "./metaPrinciple";
import "../styles/principles.css";
import PrinciplesInAol from "./principlesInAoL";
export default class Principles extends Component {
render() {
```
Thanks for the help.
Any css you add that defines styles by a tagname will apply to every element in the dom with that tagname, so in your case, adding a class name to the <h1/> is probably the best option.
In the PrinciplesInAoL component
import React, { Component } from "react";
import "../styles/principlesInAoL.css";
export default class PrinciplesInAoL extends Component {
render() {
return <h1 className="principlesInAoL-h1">Principles in Areas of Life</h1>;
}
}
and in principlesInAoL.css, add a definition for that class:
.principlesInAoL-h1{
/* your styles here */
}
ReactJS has no view encapsulation (in contrast to Angular). So in order to make CSS rule much stricter you should use CSS selector with higher specificity.
EDIT: I installed the v1.0.0.36 beta version and copied the sample from that versions docs (which looks identical to me) and it worked straight away. Not sure what the problem was but thanks for replies
I am trying to use Material-UI's withTheme to access the theme in a component.
I have followed the sample in the docs which goes through the create-react-app packager ok but in the browser gives the error: TypeError: Object(...) is not a function
and highlights the code line > 17 | export default withTheme()(WithTheme);
I have cut down the sample code to the most basic use of withTheme() and am still receiving this error
withtheme.js
import React from 'react';
import { withTheme } from 'material-ui/styles';
function WithTheme() {
const styles = {
primaryText: {
color: 'red',
}
};
return (
<h1 style={styles.primaryText}>Hello</h1>
);
}
export default withTheme()(WithTheme);
EDIT: To help clarify the problem, here is the App.js file.
import React, { Component } from 'react';
import './App.css';
import 'typeface-roboto';
import AppBar from 'material-ui/AppBar';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {brown500, brown900} from 'material-ui/styles/colors';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import WithTheme from './components/withtheme';
const Theme = getMuiTheme({
palette: {
primary1Color: brown900,
primary2Color: brown500,
}
});
class App extends Component {
render() {
return (
<MuiThemeProvider muiTheme={Theme} >
<AppBar
title="Title"
iconClassNameRight="muidocs-icon-navigation-expand-more" />
<WithTheme />
</MuiThemeProvider>
);
}
}
export default App;
I have customised the theme and changed primary1Color to brown, using muiThemeProvider. This all works fine when I remove the WithTheme component from App.js - the AppBar is brown as expected. The problem is I am getting the error when I try to use the mui withTheme function.
My intention is to set the h2 in WithTheme component to be whatever color the current theme has for primary1Color
**End Edit
Any help would be appreciated. Happy to post the (almost) exact copy of the doco sample code which achieves the same error if required.
Thanks
As MaterialUI is no longer in Beta, the spec has changed a bit, outdating Liam's answer. Per the Material-UI
v3.1.2 docs
import { withTheme } from '#material-ui/core/styles';
export default withTheme()(WithTheme);
As of Material 4, the spec was changed a bit again: https://material-ui.com/styles/api/#withtheme-component-component (thus outdating Awnage's answer too).
So now it is:
import { withTheme } from '#material-ui/styles';
export default withTheme(MyComponent);
No need to use withStyles() unless if you want to make a specific style for the component
Warp your App with MuiThemeProvider then you are able to use the theme properly
Material-Ui 0.20.0
For access theme colors use getMuiTheme
import getMuiTheme from 'material-ui/styles/getMuiTheme';
export default muiThemeable()(App)
http://www.material-ui.com/#/components/app-bar
Working Demo
Material-Ui 1.0.0 beta
For access theme colors use withTheme
import { withTheme } from 'material-ui/styles';
export default withTheme()(App)
https://material-ui-next.com/demos/app-bar/
Working Demo V1
If you intend to change the theme of material-ui, I would prefer using getMuiTheme. Refer http://www.material-ui.com/#/customization/themes for documentation. What happens here is, you are styling your component with JavaScript and hence the export requires withStyles to be called.
export default withStyles(styles)(WithTheme);
Can anyone recommend the best way to compose styled-components that need to be themed?
Here's my code: https://gist.github.com/aaronmcadam/7bfd63a6bc4cfc36f9947a449c6f494a.
I have an Avatar component which composes an Image component, which is itself a styled-component.
If I use Avatar.styled.js with <ThemeProvider>, the theme can be successfully overridden.
If I use Avatar.withTheme.js, the theme can only be overridden if I use withTheme.
Which is the preferred way of doing things like these?
from the official docs: https://github.com/styled-components/styled-components/blob/master/docs/theming.md
We export a component that takes a theme prop. The
theme you provide there is injected into your styled components via
props.theme
If you ever need to get the current theme outside styled components
(e.g. inside big components), you can use the withTheme Higher Order
Component
import { withTheme } from 'styled-components'
class MyComponent extends React.Component {
render() {
const { theme } = this.props
console.log('Current theme: ', theme);
// ...
}
}
export default withTheme(MyComponent)
I have included material-ui (and react-tap-event-plugin) in my project and added 3 buttons to one of my components:
<RaisedButton onClick={this.props.onSave} label="Save" style={styles.button}/>
<RaisedButton label='Publish' onClick={this.props.onPublish} style={styles.button}/>
<RaisedButton label='Cancel' onClick={this.onCancel.bind(this)} style={styles.buttonCancel}/>
when I click on any of these, they go very dark grey and when I click again, they go black (and stay like that). The whole applications goes bonkers, the react routing no longer works (I can see the URL changing in the address bar, but the view doesn't refresh). This all looks pretty bad for a button click :)
Any idea what I may be doing wrong? (I take care of the childContext as described in the docs, so the muiTheme is loaded).
I forgot to check the console... there are 3 exceptions whenever I press the button:
1)
vendor.js:12 Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: https://facebook.github.io/react/warnings/refs-must-have-owner.html).(…)
2)
ReactTransitionGroup.js:176 Uncaught TypeError: Cannot read property 'componentWillLeave' of undefined(…)
3)
vendor.js:12 Uncaught Error: removeComponentAsRefFrom(...): Only a ReactOwner can have refs. You might be removing a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: https://facebook.github.io/react/warnings/refs-must-have-owner.html).(…)
In the component that uses FlatButton (or RaisedButton neither work) I have this:
1) Import:
import FlatButton from 'material-ui/FlatButton'; //eslint-disable-line
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
2) in the class
getChildContext() {
return { muiTheme: getMuiTheme(baseTheme) };
}
3) and a static declaration:
EditorComponent.childContextTypes = {
muiTheme: React.PropTypes.object.isRequired,
};
Feels like I'm doing all that's required.
This may be related to what I'm experiencing:
https://github.com/callemall/material-ui/issues/2818
So probably the issue is caused by material-ui distributing it's own version of React? What's the point in that? But... my version of material-ui doesn't have a node_modules folder, so no extra React either...
Source for a component importing and using FlatButton
import React from 'react'; // eslint-disable-line
import Input from '../../../components/common/textInput'; // eslint-disable-line
import BaseEditorComponent from '../base/EditorComponent';
import FlatButton from 'material-ui/FlatButton'; //eslint-disable-line
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
export default class EditorComponent extends BaseEditorComponent {
constructor() {
super();
this.state = {
textValue: 'Enter value'
};
}
getChildContext() {
return { muiTheme: getMuiTheme(baseTheme) };
}
_onChange(e) {
this.setState({
textValue: e.target.value
});
}
render() {
return (
<div>
<Input
value={this.state.textValue}
name="SimpleText"
label="Simple Text Value:"
onChange={this._onChange.bind(this)}
/>
<FlatButton label="Test"/>
</div>
);
}
}
EditorComponent.childContextTypes = {
muiTheme: React.PropTypes.object.isRequired,
};
Also, the BaseEditorComponent:
import React from 'react';
import widgetActions from '../../widgets/WidgetActions';
import widgetInstanceStore from '../../widgets/WidgetInstanceStore';
export default class EditorComponent extends React.Component {
constructor() {
super();
}
componentDidMount() {
this.setState(widgetInstanceStore.getWidgetInstanceState(this.props.widgetId) || {});
}
save() {
widgetActions.saveWidgetInstanceState(this.props.widgetId, this.state);
}
}
Have you tried to use onTouchTap instead of onClick?
If #1 doesn't help, please show more code - component with above code and it's parent component.
As per https://github.com/callemall/material-ui/issues/2818 the solution was to include react-addons-transition-group alongside react in the browserify bundle. So it's good to know that it's not only NPM where a 2nd copy of react can slip through, but also browserify or webpack.
Thanks https://stackoverflow.com/users/3706986/piotr-sołtysiak for helping with the issue today!