I am able to modify the Slider style using withStyles:
const CustomSlider = withStyles(theme => ({
disabled: {
color: theme.palette.primary.main
},
thumb: {
height: 24,
width: 24,
},
}))(Slider);
but the height and width of the thumb is only applied when the component is disabled={false}.
is there a simple way to change the slider height and width on disabled={true}?
Demo:
https://codesandbox.io/s/slide-thumb-size-gxb4g?file=/demo.js
Reason
The style is been overridden by className Mui-disabled
You can see the color will keep.
How to solve it
Override the style of MuiSlider-thumb or Mui-disabled
One option: use MUI className nesting selector
"& .MuiSlider-thumb": {
height: 24,
width: 24
}
Notice withStyles attributes refer to the CSS API, you can use className + style hooks instead to customize the className which is not exposed by the CSS API like that
Full code:
import React from "react";
import Slider from "#material-ui/core/Slider";
import Paper from "#material-ui/core/Paper";
import { withStyles, makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles(theme => ({
margin: {
margin: theme.spacing(10),
"& .MuiSlider-thumb": {
height: 24,
width: 24
}
}
}));
const CustomSlider = withStyles(theme => ({
disabled: {
color: theme.palette.primary.main
},
thumb: {
// color: "red"
}
}))(Slider);
export default function MyCustomSlider() {
const classes = useStyles();
return (
<div>
<Paper className={classes.margin}>
<CustomSlider
defaultValue={[10, 15]}
min={0}
max={20}
valueLabelDisplay="on"
disabled={true}
/>{" "}
<CustomSlider
defaultValue={[5, 7]}
min={0}
max={20}
valueLabelDisplay="on"
disabled={false}
/>{" "}
</Paper>
</div>
);
}
Update
For withStyles
const styles = theme =>
createStyles({
margin: {
margin: theme.spacing(10)
},
thumb: {
"& .MuiSlider-thumb": {
height: 24,
width: 24
}
}
});
function MyCustomSlider(props) {
// const classes = useStyles();
return (
<div>
<Paper className={props.classes.margin}>
<Slider
defaultValue={[10, 15]}
min={0}
max={20}
valueLabelDisplay="on"
disabled={true}
className={props.classes.thumb}
/>{" "}
<Slider
defaultValue={[5, 7]}
min={0}
max={20}
valueLabelDisplay="on"
disabled={false}
/>{" "}
</Paper>
</div>
);
}
export default withStyles(styles)(MyCustomSlider);
disabled: {
"& .MuiSlider-thumb ": {
display: "none",
},
"& .MuiSlider-track": {
backgroundColor: "#e0e0e0",
},
},
This is withStyle solution , where user can change the styling of slider and its sub component.
Related
I am currently using material ui and I would like to change the color of my icon class when the active class is triggered by react-router-dom's NavLink
my code is as follows:
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import Paper from "#material-ui/core/Paper";
import Typography from "#material-ui/core/Typography";
import PeopleIcon from "#material-ui/icons/People";
import AssignmentOutlinedIcon from "#material-ui/icons/AssignmentOutlined";
import TransferWithinAStationOutlinedIcon from "#material-ui/icons/TransferWithinAStationOutlined";
import ScheduleIcon from "#material-ui/icons/Schedule";
import { NavLink } from "react-router-dom";
import { BrowserRouter as Router } from "react-router-dom";
const drawerWidth = 220;
const useStyles = makeStyles((theme) => ({
paper: {
width: drawerWidth,
borderBottomLeftRadius: 10,
borderTopLeftRadius: 10,
height: "calc(100% - 10px)",
border: "solid 1px #CCCCCC",
paddingTop: 5
},
icon: {
width: 20,
height: 20,
color: "#999999"
},
listItem: {
textDecoration: "none",
color: "inherit",
padding: 5,
cursor: "pointer",
"&:hover": {
backgroundColor: "#EEEEEE"
}
},
active: {
backgroundColor: "#999999",
color: "white",
"&:hover": {
backgroundColor: "#999999"
}
}
}));
const App = () => {
const classes = useStyles();
const routes = [
{
path: "/admin/users",
name: "Users",
icon: <PeopleIcon className={classes.icon} />
},
{
path: "/admin/assignments",
name: "Assignments",
icon: <AssignmentOutlinedIcon className={classes.icon} />
},
{
path: "/admin/transfers",
name: "Transfers",
icon: <TransferWithinAStationOutlinedIcon className={classes.icon} />
},
{
path: "/admin/liveClock",
name: "Live Clock",
icon: <ScheduleIcon className={classes.icon} />
}
];
return (
<>
<Paper variant="outlined" square className={classes.paper}>
{routes.map((r, i) => {
return (
<Router>
<NavLink
activeClassName={classes.active}
to={r.path}
key={i}
style={{
display: "flex",
alignItems: "center",
paddingLeft: 10
}}
className={classes.listItem}
>
{r.icon}
<Typography
variant="body1"
style={{ marginLeft: 10, fontSize: "15px" }}
>
{r.name}
</Typography>
</NavLink>
</Router>
);
})}
</Paper>
</>
);
};
export default App;
I would like the icon color to be white when the active class is triggered but I cannot seem to target the icon class within the active class.
Please Note: I understand my react router logic is set up incorrectly this is just to allow the active class to be triggered within my code sandbox. Thanks!
attached is a code sandbox for debuggging:
https://codesandbox.io/s/vigilant-curran-iwdtq?file=/src/App.js:0-2628
Try to reference your icon style within your active style:
active: { ...
'& $icon':{ color: '#EEEEEE'}
See it live: https://codesandbox.io/s/so-answer-cute1?file=/src/App.js
I put the activeClassname behavior on hover to show it working, as you did before.
I read Flex-box: Align last row to grid and trying to see if this will work for me too:
.grid::after {
content: "";
flex: auto;
}
but not sure how to specify this in JS styles that I use in MaterialUI:
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
paper: {
height: 140,
width: 140,
},
control: {
padding: theme.spacing(2),
},
fullName: {
marginRight: '3px'
}
}));
Like how do I add after to a MaterialUI Grid?
<Grid className={classes.root} container justify="space-around" spacing={2}>
<CompanyList companies={companies} data-test-id="companyList" />
</Grid>
You could use like below:
const useStyles = makeStyles((theme) => ({
grid: {
// --- some styles
'&::after': {
// --- some style
}
},
}));
It's similar task as to add pseudo element to material-ui component
content attribute needed to be double quoted
Working exammple
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
"&::after": {
content: '""',
width: 40,
height: 40,
backgroundColor: "cyan",
color: "white"
}
},
}));
export default function Material() {
const classes = useStyles();
return (
<div>
<h1>Material</h1>
<Grid
className={classes.root}
container
justify="space-around"
spacing={2}
>
<CompanyList companies={companies} data-test-id="companyList" />
</Grid>
</div>
);
}
I am a newbie of material UI and I am using it for my website
I want the placeholder of the inputbase in material ui to increase their lineHeight and fontSize but I don't know to access to the placeholder API to customize it, please help me out
this is my current screen
this is what I expected
this is my code
import React, { useContext } from 'react';
import { InputBase, Grid, makeStyles } from '#material-ui/core';
import { SearchBoxContext } from '../../providers/SearchBoxContextProvider';
const useStyles = makeStyles((theme) => ({
largeSearchBoxContainer: (props) => {
return {
[theme.breakpoints.up('sm')]: {
textAlign: 'left',
display: 'none',
},
};
},
hideSearchBox: {
display: 'none',
},
InputBaseStyle: {
'& $placeholder': {
fontSize: '88px',
lineHeight: '88px',
},
},
}));
export default function LargeSearchBox() {
const classes = useStyles();
var { openSearchBox } = useContext(SearchBoxContext);
return (
<>
<Grid
className={classes.largeSearchBoxContainer}
container
xs={12}
sm={12}
direction="row"
justify="flex-start"
alignItems="center"
>
<Grid item xs={12} sm={12} className={openSearchBox ? null : classes.hideSearchBox}>
<InputBase
placeholder="Search…"
className={classes.InputBaseStyle}
fullWidth
autoFocus
margin
inputProps={{ 'aria-label': 'search' }}
/>
</Grid>
</Grid>
</>
);
}
You need to override the .MuiInputBase-input CSS via the input Rule name.
In my example below, I took advantage of the classes object property as explained in the documentation.
const useStyles = makeStyles((theme) => ({
InputBaseStyle: {
"&::placeholder": {
fontSize: "88px",
lineHeight: "88px"
},
height: "120px"
}
}));
<InputBase
placeholder="Search…"
// className={classes.InputBaseStyle} you can omit this
fullWidth
autoFocus
margin
inputProps={{ "aria-label": "search" }}
classes={{
input: classes.InputBaseStyle
}}
/>
CodeSandBox: https://codesandbox.io/s/restless-dawn-b5xvv?file=/src/App.js
InputBase CSS Rule names: https://material-ui.com/api/input-base/#css
So I have a basic react app that allows the user to search for and display movies from the Movie Database API.
Heres the problem: I want to link my custom React Function SearchMovies() to a material ui component, specifically the Material Ui SearchAppBar. However, I am having trouble adding this function to the Material Ui SearchAppBar.
First, my custom code that features the SearchMovies() function. The code is below:
import React, { useState } from "react";
import MovieCard from "./movieCard";
export default function SearchMovies() {
//states = input query, movies
const [query, setQuery] = useState("");
const [movies, setMovies] = useState([]);
const searchMovies = async (e) => {
e.preventDefault();
const url = `https://api.themoviedb.org/3/search/movie?api_key=a2657ca16cc801deb9a65e9f7f9e3d4f&language=en-US&query=${query}&page=1&include_adult=false`;
try {
const res = await fetch(url);
const data = await res.json();
//console.log(data.results);
setMovies(data.results);
} catch (err) {
console.error(err);
}
};
return (
<>
<form className="form" onSubmit={searchMovies}>
<label className="label" htmlFor="query">
Movie Name
</label>
<input
type="text"
className="input"
name="query"
placeholder="i.e. Star Wars"
value={query}
onChange={(e) => setQuery(e.target.value)}
/>
<button className="button" type="Submit">
Search
</button>
</form>
<div className="card-list">
{movies
.filter((movie) => movie.poster_path)
.map((movie) => (
<MovieCard movie={movie} key={movie.id} />
))}
</div>
</>
);
}
Second, here is the code for the Material UI SearchAppBar:
import React from "react";
import AppBar from "#material-ui/core/AppBar";
import Toolbar from "#material-ui/core/Toolbar";
import IconButton from "#material-ui/core/IconButton";
import Typography from "#material-ui/core/Typography";
import InputBase from "#material-ui/core/InputBase";
import { fade, makeStyles } from "#material-ui/core/styles";
import MenuIcon from "#material-ui/icons/Menu";
import SearchIcon from "#material-ui/icons/Search";
import searchMovies from "./searchMovies";
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
flexGrow: 1,
display: "none",
[theme.breakpoints.up("sm")]: {
display: "block",
},
},
search: {
position: "relative",
borderRadius: theme.shape.borderRadius,
backgroundColor: fade(theme.palette.common.white, 0.15),
"&:hover": {
backgroundColor: fade(theme.palette.common.white, 0.25),
},
marginLeft: 0,
width: "100%",
[theme.breakpoints.up("sm")]: {
marginLeft: theme.spacing(1),
width: "auto",
},
},
searchIcon: {
padding: theme.spacing(0, 2),
height: "100%",
position: "absolute",
pointerEvents: "none",
display: "flex",
alignItems: "center",
justifyContent: "center",
},
inputRoot: {
color: "inherit",
},
inputInput: {
padding: theme.spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
transition: theme.transitions.create("width"),
width: "100%",
[theme.breakpoints.up("sm")]: {
width: "12ch",
"&:focus": {
width: "20ch",
},
},
},
}));
export default function SearchAppBar() {
const classes = useStyles();
return (
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<IconButton
edge="start"
className={classes.menuButton}
color="inherit"
aria-label="open drawer"
>
<MenuIcon />
</IconButton>
<Typography className={classes.title} variant="h5" noWrap>
MovieZone
</Typography>
<div className={classes.search}>
<div className={classes.searchIcon}>
<SearchIcon />
</div>
<InputBase
//value={query}
//onChange={(e) => setQuery(e.target.value)}
onSubmit={searchMovies}
placeholder="Search…"
classes={{
root: classes.inputRoot,
input: classes.inputInput,
}}
inputProps={{ "aria-label": "search" }}
/>
</div>
</Toolbar>
</AppBar>
</div>
);
}
So how can I inject the SearchMovies() function into the Material UI SearchAppBar, so that the user can use the Material UI component to call the SearchMovies() function and display the movie results?
You can take the reference from an angular material table example but you have mat cards its just the matter of filtering the dataSource what you give and recall that method or just change the arrayList by constructing filter arraylist or something which you provide again to the UI component
Here is the link
https://stackblitz.com/angular/kgboooaejyn?embed=1&file=src/app/table-filtering-example.ts
you need to focus on this function
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
}
You won't have a Datasource here but you can filter contents from ArrayList
Hope this idea works...!!
I am trying to learn material ui.
I am trying to change the css of the loading bar.
I referred to the documentation and used colorPrimary classes
but its not changing.
can you tell me how to fix it so taht in future I will fix it myself
providing my code snippet below.
all my code is in ReceipeReviewCardList.js
https://codesandbox.io/s/2zonj08v5r
const styles = {
root: {
flexGrow: 1
},
colorPrimary: {
color: "green"
}
};
render() {
const { classes } = this.props;
return (
<div className={classes.root}>
<LinearProgress
className={classes.colorPrimary}
variant="determinate"
value={this.state.completed}
you can use example as was in the reply of the issue in material ui github project: https://github.com/mui-org/material-ui/issues/12858#issuecomment-421150158
import React, { Component } from 'react';
import { withStyles } from '#material-ui/core/styles';
import { LinearProgress } from '#material-ui/core';
class ColoredLinearProgress extends Component {
render() {
const { classes } = this.props;
return <LinearProgress {...this.props} classes={{colorPrimary: classes.colorPrimary, barColorPrimary: classes.barColorPrimary}}/>;
}
}
const styles = props => ({
colorPrimary: {
backgroundColor: '#00695C',
},
barColorPrimary: {
backgroundColor: '#B2DFDB',
}
});
export default withStyles(styles)(ColoredLinearProgress);
It works perfect.
You can override the background colors with makeStyles.
On makeStyles file:
export const useStyles = makeStyles(() => ({
root: {
"& .MuiLinearProgress-colorPrimary": {
backgroundColor: "red",
},
"& .MuiLinearProgress-barColorPrimary": {
backgroundColor: "green",
},
},
})
Import and use:
import { useStyles } from "./myFile.style";
...
const classes = useStyles();
...
<div className={classes.root}>
<LinearProgress />
</div>
It is because you set the CSS is not correctly,
const styles = {
root: {
flexGrow: 1
},
colorPrimary: {
background: 'green'
}
};
not:
const styles = {
root: {
flexGrow: 1
},
colorPrimary: {
color: "green",
}
};
Hope it help!
If you want to overwrite with sx:
sx={{
'& .MuiLinearProgress-bar1Determinate': {
backgroundColor: 'red',
}
}}
the color of the main bar is set as the BACKGROUNDCOLOR, NOT the COLOR
For Material UI v5 (#mui)
<LinearProgress sx={{
backgroundColor: 'white',
'& .MuiLinearProgress-bar': {
backgroundColor: 'green'
}
}}
variant="determinate"
value={10}/>
I did do it by this way, creating your own theme
import {createMuiTheme, MuiThemeProvider } from '#material-ui/core/styles';
const theme = createMuiTheme({
palette: {
secondary: {
main: '#42baf5'
}
}
})
<MuiThemeProvider theme={theme}>
<LinearProgress color="secondary"/>
</MuiThemeProvider>
An easy workaround i stumbled upon which doesn't seem too much of a hack:
<LinearProgress
className="VolumeBar"
variant="determinate"
value={volume}
/>
.VolumeBar > * { background-color:green; }
.VolumeBar{background-color:gray ;}
The first rule makes the progress appear green(completed part).
The second rule takes care of the uncompleted part .
const BorderLinearProgress = withStyles((theme: Theme) =>
createStyles({
root: {
width: '95%',
height: 10,
borderRadius: 5,
marginTop: 8,
marginBottom: 20
},
colorPrimary: {
backgroundColor: Liquidity.colors.main.pink,
},
bar: {
borderRadius: 5,
backgroundColor: Liquidity.colors.main.yellow,
},
}),
)(LinearProgress);
This worked for me (Material ui version 4):
progressbar: {
background: 'yellow',
'& .MuiLinearProgress-bar': {
backgroundColor: theme.palette.success.main,
},
},
And then
<LinearProgress
className={classes.progressbar}
variant="determinate"
value={30}
/>
That have worked for me !
First set a className to the LinearProgress component
<LinearProgress
className="custom-class"
variant="determinate"
value={MyValue}
/>
then style it from your attached css file as shown in the following :
.custom-class > * { background-color:green !important; }
.custom-class{background-color:gray !important;}
using the !important tag is premordial to override the original color.
style: progress: { color: 'red' },
Component:
<LinearProgress color="inherit" className={classes.progress} />