I want to change the size of SVG icons with mui v5.
import { SvgIcon } from "#mui/material";
<SvgIcon component={icon} sx={{height: "5rem", width: "5rem"}}
Specifying sx does not change the size at all. why?
version in use
"#mui/material": "^5.8.1",
Related
i am trying to make a small scollbar in react js in css it works only when given like this scrollbar-width: thin; but react does not supported "-" so i used like below but its not working the scroll bar is appearing i cant use inline or class styling
const styles = {
module: {
height: "30rem",
overflowY: "scroll",
scrollbarWidth: "thin", // this doesnot work
},
}
Try this way: push CSS code to another file then import that to react page.
I am trying to set a custom cursor image when hovered on a specific element. I've tried putting my svg icon in src folder and call it in styled components as
const HStyles = styled.h3`
cursor: url("images/pen-tool.svg");
`;
But it doesn't change the cursor to pen image. I've also tried
cursor: url('images/pen-tool.svg'),
url('images/pen-tool.cur');
cursor: url('images/pen-tool.svg'),
move;
My svg has a width and height defined in it's svg tag but still no work. Am I missing something here ?
You can check my code sandbox sample here
const HStyles = styled.h3`
cursor: url("images/pen-tool.svg");
`;
Styled components is CSS-in-JS. Your can't write declarations like "images/pen-tool.svg" and have to call variable from import.
Just import images/pen-tool.svg and call it like:
import penTool from "./images/pen-tool.svg";
const HStyles = styled.h3`
cursor: url(${HStyles}), auto;
`;
and don't forget "auto"
I am trying to change the background color of a react-bootstrap list group item.
My example.js file
import {classes} from "./Sidebar.module.css";
import ListGroup from "react-bootstrap/ListGroup";
import React from "react";
const Sidebar = () => {
return (
<div>
<ListGroup>
<ListGroup.Item className = {classes.Color} >Products</ListGroup.Item>
<ListGroup.Item>Stores</ListGroup.Item>
</ListGroup>
</div>
)
}
Sidebar.module.css file has
.Color{
background-color: red;
Even after giving a custom class name, the background color is still the default color.
If you want to change a default color use !important. Also remove curly braces when you load styles from Sidebar.module.css. Like this
import classes from './Sidebar.module.css';
.Color {
background-color: red !important;
}
In Material-UI's components you can give a style object for the component itself as an attribute on the JSX tag, but you have to give a separate style object for the underlineFocusStyle for example.
I mean for example TextField component's underlineFocusStyle.
You would style it like:
<TextField hintText="Hint Text" style={{width: '80%'}}
underlineFocusStyle={{backgroundColor: '#0000FF', height: '2px'}}
/>
Now, how to write that in normal css. The styling of that underlineFocusStyle of the component on top of styling the TextField component's style itself?
like, the style for the TextField's width would be of course:
width: 100%
but how the underlineFocusStyle would be styled?
Something like:
width: 100&
.underline-focus-style: background-color: #000FF
Because I'd like to give a style for the component, which has to be written in css. Thank you.
You can apply css styles to underlineFocusStyle and also to any material-ui component. Declare a const style object and add your css like below
const style = {
"background-color": "#fff", color:"#333"
}
and then pass this style object to underlineFocusStyle props like below
<TextField underlineFocusStyle={style} />
Hope this answers your question.
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)