score:0
i recommend looking at mui's documentation example: https://v4.mui.com/components/steppers/#customizedsteppers.js
you will need to create custom components to represent the styles you want.
const customeconnector = withstyles({
active: {
'& $line': {
bordercolor: '#784af4',
},
},
completed: {
'& $line': {
bordercolor: '#784af4',
},
},
})(stepconnector);
function customestepicon(props) {
const classes = // create styles
const { active, completed } = props;
return (
<div
classname={clsx(classes.root, {
[classes.active]: active,
})}
>
{completed ? <check classname={classes.completed} /> : <div classname={classes.circle} />}
</div>
);
}
<stepper alternativelabel activestep={activestep} connector={<customconnector />}>
{steps.map((label) => (
<step key={label}>
<steplabel stepiconcomponent={customstepicon}>{label}</steplabel>
</step>
))}
</stepper>
update
here is an updated link to the v5 implementation: https://mui.com/components/steppers/#customized-horizontal-stepper
Source: stackoverflow.com
Related Query
- Overriding MUI Stepper styles in React 2022
- Global Styles with React and MUI
- Overriding react components styles with styled component
- How to create insertion point to mount styles in shadow dom for MUI material v5 in React custom element
- Overriding Styles in Material UI in React
- I try to override materialUI inbuilt classes using CSS file, styles are applying all the components in React how to stop overriding styles globally?
- Passing styles from parent to mui component in react
- webpack style-loader - import different styles on react components without overriding
- React overriding child element styles
- React MUI - overriding styling for selected tab not working
- Setting a backgroundImage With React Inline Styles
- Can I make dynamic styles in React Native?
- How to apply global styles with CSS modules in a react app?
- Passing props to MUI styles
- How to add SCSS styles to a React project?
- !important inline styles in react
- React Native: Different styles applied on orientation change
- React testing library: Test styles (specifically background image)
- Setting Complex react inline styles such as hover, active on react components such as button
- React Native inline styles and performance
- Customize MUI Table styles - last-child
- ClassName styles not working in react
- How do you change the Stepper color on React Material UI?
- Month and Year picker in MUI React
- React - How to apply CSS styles to iframe content
- MUI installation doesn't work with React 18
- React native: header styles in navigationOptions not working
- Adding inline styles to react
- Get row item on checkbox Selection in React MUI DataGrid
- How to write inline styles in react
More Query from same tag
- How to deploy an already built react app with express.js backend to heroku
- React countdown using Material UI ProgressBar
- How to declare variable inside react function?
- Getting a 403 error while using Axios in React
- How To Connect to two different web server in localhost
- How to filter array of objects in React
- Not loading React files when serving with Express
- How to override notification configuration for specific notification only?
- got stuck on fetching data in react js (using express, nodejs, json file)
- Adding a <strong> Tag to the typed letters in Autocomplete field in React
- Best practice for validating input while onChange inside React custom hook?
- Using a Promise to check if a new random number has been generated
- Mobx React component doesn't update when rendered
- Dynamically import abcjs in Next.js
- Unable to get hook from context provider
- Cannot read property 'publish' of undefined in react
- How to pass event and other arguments inside an arrow function in ReactJs
- How to call a function from Props interface in Typescript/React
- Reduce duplicated boilerplate code in React
- uploading files to firebase-firestore with react
- One router work but other router not work
- React App - createProxyMiddleware is not a function
- Mapping through elements in array and displaying them in a paragraph
- Puppeteer: wait for request to finish after dropdown selection
- Checking authentication in React
- Issue with Material-UI Select onChange
- How can export components to storybook
- react-leaflet with functional components and ImageOverlay
- React how to have component that is not affected by react router
- React hooks - setState does not update some state properties