diff --git a/packages/hooks/__tests__/use-namespace.test.tsx b/packages/hooks/__tests__/use-namespace.test.tsx
index 2a6094e506..b1333700e4 100644
--- a/packages/hooks/__tests__/use-namespace.test.tsx
+++ b/packages/hooks/__tests__/use-namespace.test.tsx
@@ -7,6 +7,14 @@ import type { VueWrapper } from '@vue/test-utils'
const TestComp = defineComponent({
setup() {
const ns = useNamespace('table')
+ const cssVar = ns.cssVar({
+ 'border-style': 'solid',
+ 'border-width': '',
+ })
+ const cssVarBlock = ns.cssVarBlock({
+ 'text-color': '#409eff',
+ 'active-color': '',
+ })
return () => (
text
@@ -64,5 +73,11 @@ describe('use-locale', () => {
'ep-table-body__content--active', // bem('body', 'content', 'active')
'is-focus', // is('focus')
])
+
+ const style = wrapper.find('#testId').attributes('style')
+ expect(style).toMatch('--ep-border-style: solid;')
+ expect(style).not.toMatch('--ep-border-width:')
+ expect(style).toMatch('--ep-table-text-color: #409eff;')
+ expect(style).not.toMatch('--ep-table-active-color:')
})
})
diff --git a/packages/hooks/use-namespace/index.ts b/packages/hooks/use-namespace/index.ts
index c3f07ec338..fe703e6e6c 100644
--- a/packages/hooks/use-namespace/index.ts
+++ b/packages/hooks/use-namespace/index.ts
@@ -62,7 +62,9 @@ export const useNamespace = (block: string) => {
const cssVar = (object: Record) => {
const styles: Record = {}
for (const key in object) {
- styles[`--${namespace.value}-${key}`] = object[key]
+ if (object[key]) {
+ styles[`--${namespace.value}-${key}`] = object[key]
+ }
}
return styles
}
@@ -70,7 +72,9 @@ export const useNamespace = (block: string) => {
const cssVarBlock = (object: Record) => {
const styles: Record = {}
for (const key in object) {
- styles[`--${namespace.value}-${block}-${key}`] = object[key]
+ if (object[key]) {
+ styles[`--${namespace.value}-${block}-${key}`] = object[key]
+ }
}
return styles
}