diff --git a/packages/runtime/src/components/_internal/ImplWrapper/ImplWrapperMain.tsx b/packages/runtime/src/components/_internal/ImplWrapper/ImplWrapperMain.tsx index 018f82cb..aeb28da4 100644 --- a/packages/runtime/src/components/_internal/ImplWrapper/ImplWrapperMain.tsx +++ b/packages/runtime/src/components/_internal/ImplWrapper/ImplWrapperMain.tsx @@ -68,9 +68,11 @@ export const ImplWrapperMain = React.forwardRef { - if (isArray(obj)) { - return obj.concat(src); + return mergeWith({}, prevProps, result.props, (target, src, key) => { + if (isArray(target)) { + return target.concat(src); + } else if (key === 'customStyle') { + return mergeCustomStyle(target, src); } }); }, @@ -175,3 +177,14 @@ const useDidUpdate = (fn: Function) => { } }); }; + +function mergeCustomStyle(s1?: Record, s2?: Record) { + if (s1 && s2) { + return mergeWith({}, s1, s2, (target: string, src: string) => { + if (target && src) { + return `${target};${src}`; + } + }); + } + return s1 || s2; +} diff --git a/packages/runtime/src/traits/core/Style.tsx b/packages/runtime/src/traits/core/Style.tsx index 7cfbb148..3589c6b9 100644 --- a/packages/runtime/src/traits/core/Style.tsx +++ b/packages/runtime/src/traits/core/Style.tsx @@ -25,8 +25,12 @@ export default implementRuntimeTrait({ })(() => { return ({ styles }) => { const customStyle: Record = {}; - styles.forEach(style => { - customStyle[style.styleSlot] = style.style; + styles.forEach(({ style, styleSlot }) => { + if (!customStyle[styleSlot]) { + customStyle[styleSlot] = ''; + } + // add a ';' between css texts, in case user forgets to add ';' in the end + customStyle[styleSlot] = `${customStyle[styleSlot]};${style}`; }); return { props: {