score:2
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!
score:0
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);
score:0
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}
/>
score:0
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
score:1
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>
score:1
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 .
score:5
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>
score:9
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.
Source: stackoverflow.com
Related Query
- color change for the loading bar component of material ui
- How to change the text color for the percentage shown at the end of the progress bar
- Change color of the IconComponent of Material UI's Select Component
- Adding color for a span inside a Link component doesn't change the color of the span?
- How to change the progress bar background color dynamically in react material ui?
- React testing library on change for Material UI Select component
- How do you change the Stepper color on React Material UI?
- How to change the text color of the selected row in material ui table
- Compile error using the Component Lab > Autocomplete feature for SVG Icons in Material UI
- Vue js for non SPA apps - loading components in with out the app component
- How do I change the color of each bar in Recharts?
- How to change the language for KeyboardDatePicker material ui?
- React : How to stop re-rendering component or making an API calls on router change for the same route
- How to change the text color and background color of ant-tooltip component
- How to change the color of non progreesed bar in Apexcharts RadialBar Charts?
- Override of Button component doesn't change the hover color
- How to set the background color of material ui drawer component with styled-components?
- How to change the background color of a parent component from inside a child component in react, gatsby
- Change the MobileStepper color on React Material UI
- How to change the state of a sibling component in ReactJS for a Master/Slave checkbox system?
- Material UI: How can I change the border color of the Select component?
- Change the tick color in MuiCheckbox material UI
- how to change the antd carousel dot shape and color with styled component
- Change the style KeyboardDatePicker Material UI component
- how to change the color of childs elements on card hover in material ui?
- How do you change the color of a React component using props
- Is there a way to change the close icons on the autocomplete component of material ui?
- material ui change the checkbox color
- Maintain the context data for each child component on React router change
- How to change the underline color of the input component in MD Bootstrap
More Query from same tag
- JavaScript, How to concat objects into arrays in LocalStorage?
- Why I get UNDEFINED from ENVIRONMENT VARIABLE in REACT App?
- Dynamic JSX element/tag names
- Module not found: You attempted to import which falls outside of the project src/ directory. Relative imports outside of src/ are not supported
- call api response on getting in react js
- Fetch polyfill, undefined PromiseValue
- "setState(…): Can only update a mounted or mounting component" inside componentDidMount
- Create a Comment Widget in React
- React : Checkbox stuck to true, but state is updated
- Creating a simple hashtag formatter in React Native
- Dockerized React App failed to bind to $PORT on Heroku
- NextJS Script TradingView widget configuration
- ReactJS properly updating state with redux
- Get country name in jVectorMap - React
- Loop with componentDidUpdate
- S3 upload with presigned URLs and CORS Issue
- Setting the state of a React Component from 2 input fields
- Redirect React Router Route From onClick in Modal
- How can I render a list by clicking a button in React?
- State value from one React class used in another React class
- Nested TabNavigator inside StackNavigator: controlling the header
- How to add a value to an object inside a array of files?
- How to globally style dynamic react data (dangerouslySetInnerHTML) with styled-components?
- Select onChange link to value - ReactJS
- Modifying object in this.state of a React component
- how to map through multiple images, after connecting to a third party api
- How to Delete Image from Firebase cloud Storage - REACT
- How to account for page scrolling with react-DND drop events?
- Component not displayed - React
- NextJs 'npm build' and 'npm start' messes up styles