Comments (6)
const CustomSteps = {
...StepsStyleConfig,
baseStyle: (props:any) => ({
...StepsStyleConfig.baseStyle(props),
stepIconContainer: {
...StepsStyleConfig.baseStyle(props).stepIconContainer,
_activeStep: {
bg: 'red',
},
},
}),
};
``` Thanks a lot, I fixed.
from chakra-ui-steps.
I am experiencing the same issue. While customizing the color of the active step fixes the problem, I think this still is a bug, that incorrectly in light mode, the dark mode background color for the active step is used.
from chakra-ui-steps.
Hi, I have found a solution for this, in your theme file create a custom theme for the component this way:
const Steps = {
...StepsStyleConfig,
baseStyle: (props: any) => {
return {
stepIconContainer: {
...StepsStyleConfig.baseStyle(props).stepIconContainer,
_activeStep: {
bg: "red",
},
},
};
},
};
from chakra-ui-steps.
It worked but when apply custom theme, then it turns like this
from chakra-ui-steps.
Have you tried to set the orientation property to horizontal?
Edit:
I have take a look, and appears that the Step component is setting the orientation property to vertical on screen resize and not change it back to horizontal, you can use chakra useBreakpointValue to overwrite it
from chakra-ui-steps.
Had same issue.
Adding that to the theme did work for me.
Steps: {
...StepsStyleConfig,
baseStyle: (props) => ({
...StepsStyleConfig.baseStyle(props),
stepIconContainer: {
...StepsStyleConfig.baseStyle(props).stepIconContainer,
_activeStep: {
...StepsStyleConfig.baseStyle(props).stepIconContainer._activeStep,
bg: "rgb(224, 231, 239)", // Default color for light mode
},
},
}),
},
from chakra-ui-steps.
Related Issues (20)
- Feature Suggestion: Ability to know completed state HOT 5
- SystemStyleFunction Not Beong Imported HOT 2
- Vertical version is not working in unit tests. HOT 6
- Make error state icon configurable HOT 2
- Can't resolve '@chakra-ui/react-context' HOT 9
- Vertical version causes a Using kebab-case for css properties error in console. HOT 1
- `labelOrientation` prop no longer exists HOT 5
- Use custom icons in Icon props in Step component HOT 2
- Responsive not working HOT 1
- Ability to use defineMultiStyleConfig and/or definePartsStyle HOT 2
- In the latest version of the library, with state="error" all previous steps change color to red HOT 1
- Add a type to StepsStyles HOT 1
- cursor is default and not pointer when hovering over clickable on variant circles or circles-alt HOT 3
- Label Orientation HOT 3
- Vertical orientation with no Collapse HOT 3
- Not working with chakra 2.5.* HOT 5
- v2.1.0 causes "Cannot find module" error HOT 3
- How can I update the state prop on a particular step index
- Getting this error trying to install it in nextjs HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from chakra-ui-steps.