Skip to content

fix: calendar文本color继承问题&calendarCard顶部箭头icon替换为Image标签 #3444

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
xiaoyatong merged 1 commit into from
Apr 29, 2026
+46 −7
Merged

fix: calendar文本color继承问题&calendarCard顶部箭头icon替换为Image标签 #3444

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions src/packages/calendar/calendar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,9 +127,20 @@
font-weight: $calendar-day-font-weight;
margin-bottom: 4px;

// 部分 Taro 机型下子节点不会稳定继承父级 color，颜色直接落到最内层文案。
&-day,
&-info-curr {
color: $color-title;
}

&:nth-child(7n + 0),
&:nth-child(7n + 1) {
color: $color-primary;

.nut-calendar-day-day,
.nut-calendar-day-info-curr {
color: $color-primary;
}
}

&-info,
Expand Down Expand Up @@ -173,11 +184,21 @@
.nut-calendar-day-info {
color: $color-primary-text;
}

.nut-calendar-day-day,
.nut-calendar-day-info-curr {
color: $color-primary-text;
}
}

&-disabled {
color: $calendar-disable-color !important;

.nut-calendar-day-day,
.nut-calendar-day-info-curr {
color: $calendar-disable-color;
}

.nut-calendar-day-info-curr {
display: none;
}
Expand All @@ -187,10 +208,20 @@
background-color: $calendar-choose-background-color;
color: $calendar-choose-color;

.nut-calendar-day-day,
.nut-calendar-day-info-curr {
color: $calendar-choose-color;
}

&-disabled {
background-color: $calendar-choose-disable-background-color;
color: $calendar-disable-color !important;

.nut-calendar-day-day,
.nut-calendar-day-info-curr {
color: $calendar-disable-color;
}

.nut-calendar-day-info-curr {
display: none;
}
Expand Down
13 changes: 13 additions & 0 deletions src/packages/calendarcard/calendarcard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,13 @@
margin-bottom: 4px;
text-align: center;

// 部分 Taro 机型下子节点不会稳定继承父级 color，颜色直接落到最内层文案。
&-top,
&-inner,
&-bottom {
color: $color-title;
}

&.header {
cursor: auto;
}
Expand All @@ -66,6 +73,12 @@

&.weekend {
color: $calendar-choose-color;

.nut-calendarcard-day-top,
.nut-calendarcard-day-inner,
.nut-calendarcard-day-bottom {
color: $calendar-choose-color;
}
}

&.active {
Expand Down
9 changes: 2 additions & 7 deletions src/packages/calendarcard/icon.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { FC } from 'react'
import { Image, View } from '@tarojs/components'
import { Image } from '@tarojs/components'

let left =
'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNNi42MDUgOS40OWEuNzcxLjc3MSAwIDAgMSAwLS45OGwzLjYtNC4zNzJhLjc3MS43NzEgMCAwIDEgMS4xOS45ODFMOC4yIDlsMy4xOTcgMy44ODFhLjc3MS43NzEgMCAxIDEtMS4xOTEuOThsLTMuNi00LjM3eiIvPjwvc3ZnPg=='
Expand Down Expand Up @@ -30,15 +30,10 @@ if (process.env.TARO_ENV === 'jdharmony_cpp') {

const Icon: FC<IconProps> = ({ url }) => {
const style = {
background: `url('${url}') no-repeat center`,
backgroundSize: '100% 100%',
width: 18,
height: 18,
}
if (process.env.TARO_ENV === 'jdharmony_cpp') {
return <Image src={url} style={style} />
}
return <View style={style} />
return <Image src={url} style={style} mode="aspectFit" />

@coderabbitai coderabbitai Bot Apr 29, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

RTL 箭头翻转规则可能失效

Line 36 将图标改为 Image 后，src/packages/calendarcard/calendarcard.scss 里当前 RTL 选择器（仅匹配 .nut-icon-ArrowLeft/.nut-icon-ArrowRight/svg）可能命中不到，导致 RTL 下箭头方向不正确。

🔧 建议修复（最小改动） 
diff --git a/src/packages/calendarcard/icon.taro.tsx b/src/packages/calendarcard/icon.taro.tsx
@@
-  return <Image src={url} style={style} mode="aspectFit" />
+  return (
+    <Image
+      className="nut-calendarcard-arrow-icon"
+      src={url}
+      style={style}
+      mode="aspectFit"
+    />
+  )
diff --git a/src/packages/calendarcard/calendarcard.scss b/src/packages/calendarcard/calendarcard.scss
@@
-      .nut-icon-ArrowLeft,
-      .nut-icon-ArrowRight,
-      svg {
+      .nut-icon-ArrowLeft,
+      .nut-icon-ArrowRight,
+      svg,
+      .nut-calendarcard-arrow-icon {
         transform: rotate(180deg);
       }
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/packages/calendarcard/icon.taro.tsx` at line 36, The Image return
replaced an inline SVG so existing RTL CSS selectors for
.nut-icon-ArrowLeft/.nut-icon-ArrowRight/svg no longer match; either add the
same icon class names to the Image element returned (e.g., include
className="nut-icon-ArrowLeft" or "nut-icon-ArrowRight" on the Image in the
component that returns <Image src={url} ... />) so the current RTL rules apply,
or update src/packages/calendarcard/calendarcard.scss to extend the RTL selector
to also match img/Image (e.g., include .nut-icon-ArrowLeft img,
.nut-icon-ArrowRight img or equivalent) — pick the minimal change of adding the
existing icon className to the Image element returned.

}

export const ArrowLeft: FC = () => <Icon url={left} />
Expand Down
Loading