From 344a85a97e3fbb1a697b6c7aa55f1ca39cb50c11 Mon Sep 17 00:00:00 2001
From: canisminor1990 <i@canisminor.cc>
Date: Fri, 3 Jan 2025 18:06:56 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20style:=20Fix=20BarList=20Hover?=
 =?UTF-8?q?=20style?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/BarList/index.tsx | 6 +++---
 src/BarList/styles.ts | 6 ++++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/BarList/index.tsx b/src/BarList/index.tsx
index 2eb1940..0ba836a 100644
--- 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
index 471e910..9103b55 100644
--- 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`