I migrated from Material UI 4 to 5 Beta in my react app. From the documentation (docs style library) I can see that now I can use emotion, but when I use it I receive a message in the css attribute of the element where I use it.
My code:
import { jsx, css } from '#emotion/react';
//Other code.....
return (
<IconButton
css={css`
margin-left: 10px;
`}
//css={css({ marginLeft: 10 })}
aria-label='show 4 new mails'
color='inherit'
>
<Badge badgeContent={1} color='secondary'>
<MailIcon />
</Badge>
</IconButton>
)
If i inspect HTML, inside thebutton that is rendered i can see the attribute css like this css="You have tried to stringify object returned from 'css' function. It isn't supposed to be used directly (e.g. as value of the 'className' prop), but rather handed to emotion so it can handle it (e.g. as value of 'css' prop)."
I tried css prop with backtick and css function but none is working.
EDIT:
Changed marginleft into margin-left (this was an error while copiyng the code form my project)
I solved this ussues by adding /** #jsxImportSource #emotion/react */ in top of my import
Related
I have an app in next js that is also using chakra UI. I am attempting to add a footer to the app, but am unable to force the components under the navbar to take up the remaining height of the screen.
I think my issue is that I am not correctly passing CSS styling down to the components.
_app.tsx
import '../styles/globals.css';
function MyApp({ Component, pageProps }) {
return (
<ChakraProvider theme={theme}>
<Navbar></Navbar>
<Component id='component-container' {...pageProps} />
)
}
export default MyApp
styles/globals.css
#component-container {
height: 100%
}
Even when I set the #component-container to something like color: white I do not see this CSS applied to the child components. I don't think I am correctly passing the CSS down to the components.
How do I correctly apply CSS to all components in next js?
You need to pass that ID to an HTML element inside that component...
Right now you are only passing that ID as a props to that component and probably none of the elements inside it have that ID(as I don't know what the code is for your component).
Go inside that component and either give that ID to which element you want(Probably the first DIV element) or pass it as a props to that element
I'm using material-ui version 3.9.3 in my React application. I want to add a background image on a dialog. I'm using the Dialog component for it but I'm unable to add a background image on the whole dialog.
For example:
<Dialog
fullScreen={fullScreen}
open={this.props.open}
onClose={this.handleClose}
aria-labelledby='responsive-dialog-title'
>
<DialogTitle
id='customized-dialog-title'
onClose={this.handleClose}
noCloseButtonNeeded={noCloseButtonNeeded}
>
{/* some jsx */}
</DialogTitle>
<DialogContent>
{children}
</DialogContent>
</Dialog>
I have tried to add an image using classes and custom CSS but I'm unable to do it.
Can anyone help me out to add it? Thanks in advance :)
First, you can define the background image in a styles object that can be used with the withStyles higher-order component to apply it to the dialog:
const styles = {
dialog: {
backgroundImage: "url(https://i.imgur.com/HeGEEbu.jpg)"
}
};
When you pass this object to the withStyles HOC, it will supply your component with a classes prop containing properties with the same names as the properties on styles that you've defined.
Next, you can apply this class to the Dialog by taking advantage of the classes prop (the specific overrides made available for the Dialog component are detailed here):
<Dialog ... classes={{paper: classes.dialog}}>
{/* ... */}
</Dialog>
This is telling material-ui to merge the styles you have defined in styles.dialog with the default styles on the Paper element that is used with the Dialog.
You'll need to make sure that you're wrapping your component in the withStyles HoC. If you have a class component, it will look something like this:
export default withStyles(styles)(DialogWithBackgroundImage);
For functional components, it would look something like:
export default withStyles(styles)(({open, children, classes}) => (<Dialog ...></Dialog>))
Here's a working example that ties everything together: https://codesandbox.io/embed/q3zy4r2np4
I'm working on a ReactJS app that has a header at the top, a menu on the left, and the "frame" in the middle is where routes and their corresponding components are loaded. I want to be able to apply a CSS stylesheet to specific components only when they are loaded. I also don't want them applied all the time or to the top header or left menu.
My expectation was that adding import 'custom.css'; to a specific component would only apply the stylesheet's styles to that component and it's children when the route is active. Instead, it applies it to the entire page even when the route/component are not loaded.
I understand that an alternative approach is styled components, but, for my use-case, a design company is supplying a stylesheet (which should remain unchanged) that we need to consume only for the sub-module I'm working on and I don't want its styles to affect the rest of the app.
How can I have a stylesheet only applied to my active route/component?
Use simple CSS technique. Suppose you have two components with different css files (say about.css and contact.css). Now consider your both CSS file have one common class with different style properties, like:
about.css
.container{
max-width: 400px;
}
contact.css
.container{
max-width: 500px;
}
Yes in ReactJS both the CSS files will load at the same time and will override any one of the style. so to solve this problem add class to differentiate this styles, like:
about.css
.about-component.container{
max-width: 400px;
}
contact.css
.contact-component.container{
max-width: 500px;
}
If you want apply only when the component is mounted, you can use the lifecycle.
The follow example is based in the idea you are using sass, React, sass-node and have the loaders into webpack.
<pre>
import React from 'react';
import './styles.scss';
class MyComponent {
constructor(props) {
super(props);
this.state = { className: '' }
}
componentDidMount() {
this.setState({
className: 'myOwnClass'
});
}
render(){
return (
<div className={this.state.className}>This is a example</div>
);
}
}
export default myComponent;
</pre>
To be able to only call that specific CSS when you need it you can use CSS Modules. You may need to update your version of react.
When saving your CSS file save it with a ".module.css" eg. "styles.module.css". The CSS in these files can only be used and accessed by hte components where are they are imported. As stated in a tutorial from W3Schools.
Let's say this is your CSS code in styles.module.css:
.container {
color: white;
}
.cont-child {
background-color: red;
}
Then in your JS file you can import the CSS file like this if the JS and CSS files are in the same directory. Make sure you point to the correct path.
import styles from './styles.module.css'
Then in your HTML section you can use it like this:
class Home extends React.Component {
render() {
return(
<main className={ styles.container } >
<div className={ styles["cont-child"]} >
Some div text about something...
</div>
</main>
);
}
}
I currently use both ways to access the selectors, since the styles variable acts like an object. I placed both of them here because the second option is capable of fetching selectors named like "btn-active". Which comes in handy in some situations. Camelcasing is considered cleaner though.
Please note: I originally posted this answer as a reply to a similar question here React CSS - how to apply CSS to specific pages only
I want to be able to apply a CSS stylesheet to specific components
only when they are loaded.
Why not apply the styles inline via React.js?
Step 1. Create the style object for the component:
var componentOneStyle = {
color: 'white',
backgroundColor: 'red'
};
Step 2. Populate the component's style attribute with the style object:
ReactDOM.render(<div style={componentOneStyle}>This is Component One</div>, mountNode);
I am using the Table component from the react library material-ui.
For some reason, each row, including the header, has a 24px padding, top and bottom, which I can't override.
I already tried changing the style on all the underlying components with no success. Here is the code:
<Table>
<TableHeader adjustForCheckbox={false} displaySelectAll={false} fixedHeader={true}>
<TableRow>
<TableHeaderColumn>id</TableHeaderColumn>
<TableHeaderColumn>name</TableHeaderColumn>
<TableHeaderColumn>number</TableHeaderColumn>
</TableRow>
</TableHeader>
<TableBody showRowHover={true} displayRowCheckbox={false}>
{data.map(item => {
return (
<TableRow key={item.id}>
<TableRowColumn>{item.id}</TableRowColumn>
<TableRowColumn>{item.name}</TableRowColumn>
<TableRowColumn>{item.number}</TableRowColumn>
</TableRow>
);
})}
</TableBody>
</Table>
Any idea how which component's style needs to be changed in order to override this styling?
This kind of requirements can be handled with overrides in Material UI as per below example:
Step 1: include following dependencies
import { ThemeProvider } from '#material-ui/core'
import { createMuiTheme } from '#material-ui/core/styles';
Step 2: Define custom css related changes as
const theme = createMuiTheme({
overrides: {
MuiTableCell: {
root: { //This can be referred from Material UI API documentation.
padding: '4px 8px',
backgroundColor: "#eaeaea",
},
},
},
});
Step 3: Wrap your component or your code block with
<ThemeProvider theme={theme}>
<Table>
<TableRow>
<TableCell component="td" scope="row">
</TableCell>
</TableRow>
</Table>
</ThemeProvider>
This is how we can override the Material UI style from our custom style.
Happy Coding :)
The issue was with the height property of both the TableRow and TableHeaderColumn/TableRowColumn. For some reason this property manifested itself as padding-top/bottom.
To make a long story short, set the height property on the row and columns.
you can set size and paading props in material ui table
import {Table,} from '#material-ui/core';
<Table size="small" aria-label="a dense table"></Table>
refer this for more details : https://material-ui.com/api/table/
and make sure that elements inside the table row has small sizes .
Indeed, there is a padding added in the Table component, as seen here in the code of that component.
It cannot be overridden in material-ui API, and the context Theme variable desktopGutter is used in many places so I suggest not to change it.
What you can do is override that with a custom CSS item, that you will bundle with the rest of your CSS, either classic stylesheets or "react stye" with Radium or similar.
For example:
<Table id="mytable">...your material-ui JSX...</Table>
In the CSS:
#mytable .table {
padding: 0 !important;
}
Edit: my mistake, this is for the main table component, not the rows, but you can do something similar with the other components by watching in the developper tools which CSS path needs to be overriden.
I'm using react and material-ui in my project and I have come across a simple issue that I just dont't know how to solve.
I want to create a drawer and set its height in a way that when it will open, it wont open over the app bar.
There is no parameter in the Drawer component for the height, I also tried to override its style and setting up the height on the style object like this :
<Drawer style={{height:'90%'}} />
But it didn't work.
The only way I can think of, is editing the code of the Drawer component, but ofcourse I want to avoid that.
Any idea on how I can define the height?
Here you go:
<Drawer open={this.state.open} containerStyle={{height: 'calc(100% - 64px)', top: 64}}>
<MenuItem>Menu Item</MenuItem>
<MenuItem>Menu Item 2</MenuItem>
</Drawer>
containerStyle is prohibited in version 1.0 and above
So you need to use props classes instead
Here is an example to this nontrivial case
import {withStyles, createStyleSheet} from 'material-ui/styles'
const styleSheet = createStyleSheet({
paper: {
height: 'calc(100% - 64px)',
top: 64
}
})
class CustomDrawer extends Component {
...
render () {
const classes = this.props.classes
return (
<Drawer
classes={{paper: classes.paper}}
>
...
)
}
CustomDrawer.propTypes = {
classes: PropTypes.object.isRequired
}
export default withStyles(styleSheet)(CustomDrawer)