💄 style: Fix BarList Hover style

lobehub · Jan 3, 2025 · 344a85a · 344a85a
1 parent 72c61f2
commit 344a85a
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/src/BarList/index.tsx b/src/BarList/index.tsx
@@ -39,7 +39,7 @@ export interface BarListProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 const BarList = forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
-  const { cx, styles } = useStyles();
+  const { cx, styles, prefixCls } = useStyles();
   const themeColorRange = useThemeColorRange();
   const {
     data = [],
@@ -102,7 +102,7 @@ const BarList = forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
           return (
             <Flexbox
               align={'center'}
-              className={styles.barContainer}
+              className={cx(styles.barContainer, onValueChange && styles.barHover)}
               height={rowHeight}
               horizontal
               key={item.key ?? index}
@@ -115,7 +115,7 @@ const BarList = forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
               width={'100%'}
             >
               <div
-                className={cx(styles.bar, onValueChange && styles.barHover)}
+                className={cx(`${prefixCls}-chart-bar-item`, styles.bar)}
                 style={{
                   background: item.color ?? color,
                   transition: showAnimation ? undefined : 'none',

diff --git a/src/BarList/styles.ts b/src/BarList/styles.ts
@@ -1,6 +1,6 @@
 import { createStyles } from 'antd-style';
 
-export const useStyles = createStyles(({ css, token }) => ({
+export const useStyles = createStyles(({ prefixCls, css, token }) => ({
   bar: css`
     position: absolute;
     top: 0;
@@ -20,7 +20,9 @@ export const useStyles = createStyles(({ css, token }) => ({
   `,
   barHover: css`
     &:hover {
-      opacity: 0.4;
+      .${prefixCls}-chart-bar-item {
+        opacity: 0.4;
+      }
     }
   `,
   emphasis: css`