diff --git a/client/packages/lowcoder-design/src/components/Section.tsx b/client/packages/lowcoder-design/src/components/Section.tsx
index f0d2d14d8..cad6e8bf0 100644
--- a/client/packages/lowcoder-design/src/components/Section.tsx
+++ b/client/packages/lowcoder-design/src/components/Section.tsx
@@ -149,5 +149,12 @@ export const sectionNames = {
   data: trans("prop.data"),
   meetings: trans("prop.meetings"), // added by Falk Wolsky
   field: trans("prop.field"),
-  inputFieldStyle:trans("prop.inputFieldStyle")
+  inputFieldStyle:trans("prop.inputFieldStyle"),
+  avatarStyle:trans("prop.avatarStyle"),
+  captionStyle:trans("prop.captionStyle"),
+  startButtonStyle:trans("prop.startButtonStyle"),
+  resetButtonStyle:trans("prop.resetButtonStyle"),
+  headerStyle:trans("prop.headerStyle"),
+  bodyStyle:trans("prop.bodyStyle"),
+  badgeStyle:trans("prop.badgeStyle"),
 };
diff --git a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts
index b2bd85625..acd565c68 100644
--- a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts
+++ b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts
@@ -28,7 +28,14 @@ export const en = {
     meetings: "Meeting Settings",
     data: "Data",
     field: 'Field',
-    inputFieldStyle:'Input Field Style'
+    inputFieldStyle: 'Input Field Style',
+    avatarStyle: 'Avatar Style',
+    captionStyle: 'Caption Style',
+    startButtonStyle: 'Start Button Style',
+    resetButtonStyle: 'Reset Button Style',
+    headerStyle: 'Header Style',
+    bodyStyle: 'Body Style',
+    badgeStyle: 'Badge Style',
   },
   passwordInput: {
     label: "Password:",
diff --git a/client/packages/lowcoder/src/comps/comps/avatar.tsx b/client/packages/lowcoder/src/comps/comps/avatar.tsx
index ddead0e52..61779a1c7 100644
--- a/client/packages/lowcoder/src/comps/comps/avatar.tsx
+++ b/client/packages/lowcoder/src/comps/comps/avatar.tsx
@@ -3,6 +3,10 @@ import { RecordConstructorToView } from "lowcoder-core";
 import { styleControl } from "comps/controls/styleControl";
 import _ from "lodash";
 import {
+  avatarContainerStyle,
+  AvatarContainerStyleType,
+  avatarLabelStyle,
+  AvatarLabelStyleType,
   AvatarStyle,
   AvatarStyleType,
 } from "comps/controls/styleControlConstants";
@@ -37,13 +41,20 @@ const AvatarWrapper = styled(Avatar) <AvatarProps & { $cursorPointer?: boolean,
   cursor: ${(props) => props.$cursorPointer ? 'pointer' : ''};
 `;
 
-const Wrapper = styled.div <{ iconSize: number, labelPosition: string }>`
+const Wrapper = styled.div <{ iconSize: number, labelPosition: string,$style: AvatarContainerStyleType}>`
 display: flex;
 width: 100%;
 height: 100%;
-padding: 0px;
 align-items: center;
 flex-direction: ${(props) => props.labelPosition === 'left' ? 'row' : 'row-reverse'};
+${(props) => {
+    return (
+      props.$style && {
+        ...props.$style,
+        borderRadius: props.$style.radius,
+      }
+    );
+  }}
 `
 
 const LabelWrapper = styled.div<{ iconSize: number, alignmentPosition: string }>`
@@ -55,20 +66,47 @@ flex-direction: column;
 justify-content: flex-end;
 align-items: ${(props) => props.alignmentPosition === 'left' ? 'flex-start' : 'flex-end'};
 `
-const LabelSpan = styled.span<{ color: string }>`
+const LabelSpan = styled.span<{ $style:AvatarLabelStyleType }>`
 max-width: 100%;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
-font-weight: bold;
-color: ${(props) => props.color};
+font-weight: ${props=>props.$style.textWeight};
+border-radius: ${props=>props.$style.radius};
+font-size: ${props=>props.$style.textSize};
+rotate: ${props=>props.$style.rotation};
+text-transform: ${props=>props.$style.textTransform};
+color: ${props=>props.$style.text};
+border: ${props => props.$style.border};
+border-style: ${props=>props.$style.borderStyle};
+border-width: ${props=>props.$style.borderWidth};
+font-family: ${props=>props.$style.fontFamily};
+font-style: ${props=>props.$style.fontStyle};
+margin: ${props=>props.$style.margin};
+padding: ${props=>props.$style.padding};
+background: ${props=>props.$style.background};
+text-decoration: ${props=>props.$style.textDecoration};
 `
-const CaptionSpan = styled.span<{ color: string }>`
+const CaptionSpan = styled.span<{ $style:AvatarLabelStyleType }>`
 max-width: 100%;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
-color: ${(props) => props.color};
+font-weight: ${props=>props.$style.textWeight};
+border-radius: ${props=>props.$style.radius};
+font-size: ${props=>props.$style.textSize};
+rotate: ${props=>props.$style.rotation};
+text-transform: ${props=>props.$style.textTransform};
+color: ${props=>props.$style.text};
+border: ${props => props.$style.border};
+border-style: ${props=>props.$style.borderStyle};
+border-width: ${props=>props.$style.borderWidth};
+font-family: ${props=>props.$style.fontFamily};
+font-style: ${props=>props.$style.fontStyle};
+margin: ${props=>props.$style.margin};
+padding: ${props=>props.$style.padding};
+background: ${props=>props.$style.background};
+text-decoration: ${props => props.$style.textDecoration};
 `
 const EventOptions = [clickEvent] as const;
 const sharpOptions = [
@@ -82,7 +120,10 @@ const sideOptions = [
 ] as const;
 
 const childrenMap = {
-  style: styleControl(AvatarStyle),
+  style: styleControl(avatarContainerStyle),
+  avatarStyle: styleControl(AvatarStyle),
+  labelStyle: styleControl(avatarLabelStyle),
+  captionStyle: styleControl(avatarLabelStyle),
   icon: withDefault(IconControl, "/icon:solid/user"),
   iconSize: withDefault(NumberControl, 40),
   onEvent: eventHandlerControl(EventOptions),
@@ -127,7 +168,7 @@ const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
       disabled={!props.enableDropdownMenu}
       dropdownRender={() => menu}
     >
-      <Wrapper iconSize={props.iconSize} labelPosition={props.labelPosition}>
+      <Wrapper iconSize={props.iconSize} labelPosition={props.labelPosition} $style={props.style}>
         <Badge
           count={props.badgeCount.value}
           dot={props.badgeType === 'dot'}
@@ -140,7 +181,7 @@ const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
             size={iconSize}
             icon={title.value !== '' ? null : props.icon}
             shape={shape}
-            $style={props.style}
+            $style={props.avatarStyle}
             src={src.value}
             // $cursorPointer={eventsCount > 0}
             onClick={() => props.onEvent("click")}
@@ -149,8 +190,8 @@ const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
           </AvatarWrapper>
         </Badge>
         <LabelWrapper iconSize={props.iconSize} alignmentPosition={props.alignmentPosition}>
-          <LabelSpan color={props.style.label}>{props.avatarLabel.value}</LabelSpan>
-          <CaptionSpan color={props.style.caption}>{props.avatarCatption.value}</CaptionSpan>
+          <LabelSpan $style={props.labelStyle}>{props.avatarLabel.value}</LabelSpan>
+          <CaptionSpan $style={props.captionStyle}>{props.avatarCatption.value}</CaptionSpan>
         </LabelWrapper>
       </Wrapper>
     </Dropdown>
@@ -220,6 +261,15 @@ let AvatarBasicComp = (function () {
         <Section name={sectionNames.style}>
           {children.style.getPropertyView()}
         </Section>
+        <Section name={sectionNames.avatarStyle}>
+          {children.avatarStyle.getPropertyView()}
+        </Section>
+        <Section name={sectionNames.labelStyle}>
+          {children.labelStyle.getPropertyView()}
+        </Section>
+        <Section name={sectionNames.captionStyle}>
+          {children.captionStyle.getPropertyView()}
+        </Section>
       </>
     ))
     .build();
diff --git a/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx b/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx
index 4a568fddb..3e2e5d258 100644
--- a/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx
+++ b/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx
@@ -1,6 +1,6 @@
 import { CompAction, RecordConstructorToView, changeChildAction } from "lowcoder-core";
 import { styleControl } from "comps/controls/styleControl";
-import { avatarGroupStyle, AvatarGroupStyleType } from "comps/controls/styleControlConstants";
+import { QRCodeStyle, QRCodeStyleType, avatarGroupStyle, AvatarGroupStyleType, avatarContainerStyle, AvatarContainerStyleType } from "comps/controls/styleControlConstants";
 import { UICompBuilder } from "comps/generators/uiCompBuilder";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
 import { AlignCenter, AlignLeft, AlignRight, Section, sectionNames } from "lowcoder-design";
@@ -31,13 +31,20 @@ const MacaroneList = [
   '#fcd6bb',
 ]
 
-const Container = styled.div<{ $style: AvatarGroupStyleType | undefined, alignment: string }>`
+const Container = styled.div<{ $style: AvatarContainerStyleType | undefined, alignment: string }>`
   height: 100%;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: ${props => props.alignment};
   cursor: pointer;
+  background: ${props => props?.$style?.background};
+  margin: ${props => props?.$style?.margin};
+  padding: ${props => props?.$style?.padding};
+  border: ${props => props?.$style?.border};
+  border-style: ${props => props?.$style?.borderStyle};
+  border-radius: ${props => props?.$style?.radius};
+  border-width: ${props => props?.$style?.borderWidth};
 `;
 
 const DropdownOption = new MultiCompBuilder(
@@ -79,7 +86,8 @@ export const alignOptions = [
 ] as const;
 
 const childrenMap = {
-  style: styleControl(avatarGroupStyle),
+  avatar: styleControl(avatarGroupStyle),
+  style: styleControl(avatarContainerStyle),
   maxCount: withDefault(NumberControl, 3),
   avatarSize: withDefault(NumberControl, 40),
   alignment: dropdownControl(alignOptions, "center"),
@@ -112,8 +120,8 @@ const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & {
                     src={item.src ?? undefined}
                     icon={(item.AvatarIcon as ReactElement)?.props.value === '' || item.label.trim() !== '' ? undefined : item.AvatarIcon}
                     style={{
-                      color: item.color ? item.color : (props.style.fill !== '#FFFFFF' ? props.style.fill : '#FFFFFF'),
-                      backgroundColor: item.backgroundColor ? item.backgroundColor : (props.autoColor ? MacaroneList[index % MacaroneList.length] : props.style.background),
+                      color: item.color ? item.color : (props.avatar.fill !== '#FFFFFF' ? props.avatar.fill : '#FFFFFF'),
+                      backgroundColor: item.backgroundColor ? item.backgroundColor : (props.autoColor ? MacaroneList[index % MacaroneList.length] : props.avatar.background),
                     }}
                     size={props.avatarSize}
                     onClick={() => {
@@ -163,9 +171,14 @@ let AvatarGroupBasicComp = (function () {
         )}
 
         {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          <>
+          <Section name={sectionNames.avatarStyle}>
+            {children.avatar.getPropertyView()}
+          </Section>
           <Section name={sectionNames.style}>
             {children.style.getPropertyView()}
           </Section>
+          </>
         )}
       </>
     ))
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx
index 23b86b231..01ec6226d 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx
@@ -3,7 +3,7 @@ import { BoolControl } from "comps/controls/boolControl";
 import { stringExposingStateControl } from "comps/controls/codeStateControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { styleControl } from "comps/controls/styleControl";
-import { FloatButtonStyle, FloatButtonStyleType } from "comps/controls/styleControlConstants";
+import { BadgeStyle, BadgeStyleType, FloatButtonStyle, FloatButtonStyleType } from "comps/controls/styleControlConstants";
 import { UICompBuilder } from "comps/generators/uiCompBuilder";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
 import { Section, sectionNames } from "lowcoder-design";
@@ -17,7 +17,7 @@ import styled from "styled-components";
 import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { manualOptionsControl } from "comps/controls/optionsControl";
 
-const Wrapper = styled.div<{ $style: FloatButtonStyleType }>`
+const Wrapper = styled.div<{ $badgeStyle: BadgeStyleType, $style: FloatButtonStyleType}>`
     width: 0px;
     height: 0px;
     overflow: hidden;
@@ -29,6 +29,12 @@ const Wrapper = styled.div<{ $style: FloatButtonStyleType }>`
         right: 0px;
         inset-block-end: -8px;
     }
+    .ant-float-btn-primary .ant-float-btn-body {
+    background-color: ${(props) => props.$style.background};
+    border: ${(props) => props.$style.border};
+    border-style: ${(props) => props.$style.borderStyle};
+    border-width: ${(props) => props.$style.borderWidth};
+    }
 `
 
 const buttonShapeOption = [
@@ -70,6 +76,7 @@ const childrenMap = {
     includeMargin: BoolControl.DEFAULT_TRUE,
     image: StringControl,
     icon: withDefault(IconControl, '/icon:antd/questioncircleoutlined'),
+    badgeStyle: styleControl(BadgeStyle),
     style: styleControl(FloatButtonStyle),
     buttons: manualOptionsControl(buttonGroupOption, {
         initOptions: [
@@ -92,20 +99,20 @@ const FloatButtonView = (props: RecordConstructorToView<typeof childrenMap>) =>
                 onClick={() => button.onEvent("click")}
                 tooltip={button?.label}
                 description={button?.description}
-                badge={{ count: button?.badge, color: props.style.badgeColor, dot: props?.dot }}
+                badge={{ count: button?.badge, color: props.badgeStyle.badgeColor, dot: props?.dot }}
                 type={onlyOne ? props.buttonTheme : 'default'}
                 shape={props.shape}
             />)
             : ''
     }
     return (
-        <Wrapper $style={props.style} >
+        <Wrapper $badgeStyle={props.badgeStyle} $style={props.style}>
             {props.buttons.length === 1 ? (renderButton(props.buttons[0], true)) :
                 (<FloatButton.Group
                     trigger="hover"
                     icon={props.icon}
                     shape={props.shape}
-                    badge={{ count: props.buttons.reduce((sum, i) => sum + (i.buttonType === 'custom' && !i.hidden ? i.badge : 0), 0), color: props.style.badgeColor, dot: props.dot }}
+                    badge={{ count: props.buttons.reduce((sum, i) => sum + (i.buttonType === 'custom' && !i.hidden ? i.badge : 0), 0), color: props.badgeStyle.badgeColor, dot: props.dot }}
                     type={props.buttonTheme}
                 >
                     {props.buttons.map((button: any) => renderButton(button))}
@@ -129,6 +136,7 @@ let FloatButtonBasicComp = (function () {
                 <Section name={sectionNames.layout}>
                     {hiddenPropertyView(children)}
                 </Section>
+                <Section name={sectionNames.badgeStyle}>{children.badgeStyle.getPropertyView()}</Section>
                 <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
             </>
         ))
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
index 0239042f4..d8784192c 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
@@ -13,7 +13,7 @@ import { useContext, useEffect, useRef, useState } from "react";
 import { EditorContext } from "comps/editorState";
 import { Card } from "antd";
 import styled from "styled-components";
-import { CardStyle, CardStyleType } from "comps/controls/styleControlConstants";
+import { CardHeaderStyle, CardHeaderStyleType, CardStyle, CardStyleType } from "comps/controls/styleControlConstants";
 import { MultiCompBuilder, withDefault } from "comps/generators";
 import { IconControl } from "comps/controls/iconControl";
 import { ButtonEventHandlerControl, CardEventHandlerControl, clickEvent, refreshEvent } from "comps/controls/eventHandlerControl";
@@ -22,13 +22,25 @@ import { dropdownControl } from "comps/controls/dropdownControl";
 import { styleControl } from "comps/controls/styleControl";
 const { Meta } = Card;
 
-const Warpper = styled.div<{ $style: CardStyleType | undefined, $showMate: boolean, $cardType: string }>`
+const Warpper = styled.div<{ $style: CardStyleType | undefined, $showMate: boolean, $cardType: string, $headerStyle:CardHeaderStyleType, $bodyStyle:CardHeaderStyleType }>`
   height: 100%;
   width: 100%;
   .ant-card-small >.ant-card-head {
-    background-color: ${props => props.$style?.background};
-    margin-bottom: 0px;
-    border-bottom: 1px solid ${props => props.$style?.border};
+    background-color: ${props => props.$headerStyle?.background} !important;
+    border: ${props => props.$headerStyle?.border};
+    border-style: ${props => props.$headerStyle?.borderStyle};
+    border-width: ${props => props.$headerStyle?.borderWidth};
+    border-radius: ${props => props.$headerStyle?.radius};
+    font-size: ${props => props.$headerStyle?.textSize};
+    font-style: ${props => props.$headerStyle?.fontStyle};
+    font-family: ${props => props.$headerStyle?.fontFamily};
+    font-weight: ${props => props.$headerStyle?.textWeight};
+    text-transform: ${props => props.$headerStyle?.textTransform};
+    text-decoration: ${props => props.$headerStyle?.textDecoration};
+    color: ${props => props.$headerStyle?.text};
+    rotate: ${props => props.$headerStyle?.rotation};
+    margin: ${props => props.$headerStyle?.margin};
+    padding: ${props => props.$headerStyle?.padding};
   }
   .ant-card .ant-card-actions {
     border-top: 1px solid ${props => props.$style?.border};
@@ -36,32 +48,51 @@ const Warpper = styled.div<{ $style: CardStyleType | undefined, $showMate: boole
   .ant-card .ant-card-actions>li:not(:last-child) {
     border-inline-end: 1px solid ${props => props.$style?.border};
   }
-  .ant-card-small >.ant-card-body {
-    padding: ${props => props.$cardType == 'custom' ? '0px' : '10px'};
-  }
-  .ant-card .ant-card-head {
-    background-color: ${props => props.$style?.background};
-    border-bottom: 1px solid ${props => props.$style?.border};
-  }
-  .ant-card-small >.ant-card-body {
-    background-color: ${props => props.$style?.background};
-  }
   .ant-card .ant-card-actions {
     background-color: ${props => props.$style?.background};
   }
   .ant-card .ant-card-body {
-    padding: ${props => props.$cardType == 'custom' ? '0px' : '10px'};
+   background-color: ${props => props.$bodyStyle?.background} !important;
+    border: ${props => props.$bodyStyle?.border};
+    border-style: ${props => props.$bodyStyle?.borderStyle};
+    border-width: ${props => props.$bodyStyle?.borderWidth};
+    border-radius: ${props => props.$bodyStyle?.radius};
+    rotate: ${props => props.$bodyStyle?.rotation};
+    margin: ${props => props.$bodyStyle?.margin};
+    padding: ${props => props.$bodyStyle?.padding};
   }
   .ant-card {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     background-color: ${props => props.$style?.background};
+    border: ${props => props.$style?.border};
+    border-style: ${props => props.$style?.borderStyle};
+    border-radius: ${props => props.$style?.radius};
+    border-width: ${props => props.$style?.borderWidth};
   }
   .ant-card-body {
     display: ${props => props.$showMate ? '' : 'none'};
     height: ${props => props.$cardType == 'custom' ? '100%' : 'auto'};
   }
+  .ant-card-body .ant-card-meta .ant-card-meta-title{
+    color: ${props => props.$bodyStyle?.text} !important;
+    font-size: ${props => props.$bodyStyle?.textSize};
+    font-style: ${props => props.$bodyStyle?.fontStyle};
+    font-family: ${props => props.$bodyStyle?.fontFamily};
+    font-weight: ${props => props.$bodyStyle?.textWeight};
+    text-transform: ${props => props.$bodyStyle?.textTransform};
+    text-decoration: ${props => props.$bodyStyle?.textDecoration};
+  }
+  .ant-card-body .ant-card-meta .ant-card-meta-description{
+    color: ${props => props.$bodyStyle?.text} !important;
+    font-size: ${props => props.$bodyStyle?.textSize};
+    font-style: ${props => props.$bodyStyle?.fontStyle};
+    font-family: ${props => props.$bodyStyle?.fontFamily};
+    font-weight: ${props => props.$bodyStyle?.textWeight};
+    text-transform: ${props => props.$bodyStyle?.textTransform};
+    text-decoration: ${props => props.$bodyStyle?.textDecoration};
+  }
 `;
 
 const ContainWarpper = styled.div`
@@ -140,6 +171,8 @@ export const ContainerBaseComp = (function () {
 
     onEvent: CardEventHandlerControl,
     style: styleControl(CardStyle),
+    headerStyle: styleControl(CardHeaderStyle),
+    bodyStyle: styleControl(CardHeaderStyle),
   };
 
   return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
@@ -169,6 +202,8 @@ export const ContainerBaseComp = (function () {
         <Warpper
           ref={conRef}
           $style={props.style}
+          $headerStyle={props.headerStyle}
+          $bodyStyle={props.bodyStyle}
           $showMate={props.showMeta || props.cardType == 'custom'}
           $cardType={props.cardType}
           onMouseEnter={() => props.onEvent('focus')}
@@ -280,6 +315,12 @@ export const ContainerBaseComp = (function () {
               <Section name={sectionNames.style}>
                 {children.style.getPropertyView()}
               </Section>
+              <Section name={sectionNames.headerStyle}>
+                {children.headerStyle.getPropertyView()}
+              </Section>
+              <Section name={sectionNames.bodyStyle}>
+                {children.bodyStyle.getPropertyView()}
+              </Section>
             </>
           )}
         </>
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx
index dc4d83d35..d6503d4fd 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx
@@ -1,20 +1,39 @@
 import { default as Cascader } from "antd/es/cascader";
-import { CascaderStyleType } from "comps/controls/styleControlConstants";
+import { CascaderStyleType, ChildrenMultiSelectStyleType } from "comps/controls/styleControlConstants";
 import { blurMethod, focusMethod } from "comps/utils/methodUtils";
 import { trans } from "i18n";
 import styled from "styled-components";
 import { UICompBuilder, withDefault } from "../../generators";
 import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing";
 import { CascaderChildren, CascaderPropertyView, defaultDataSource } from "./cascaderContants";
-import { getStyle } from "./selectCompConstants";
 import { refMethods } from "comps/generators/withMethodExposing";
 
-const CascaderStyle = styled(Cascader)<{ $style: CascaderStyleType }>`
+const CascaderStyle = styled(Cascader)<{ $style: CascaderStyleType,$childrenInputFieldStyle:ChildrenMultiSelectStyleType }>`
   width: 100%;
   font-family:"Montserrat";
-  ${(props) => props.$style && getStyle(props.$style)}
+  ${(props) => { return props.$style && { ...props.$style, 'border-radius': props.$style.radius } }}
 `;
 
+const DropdownRenderStyle = styled.div<{ $childrenInputFieldStyle: ChildrenMultiSelectStyleType }>`
+ background-color: ${props => props.$childrenInputFieldStyle?.background};
+    border: ${props => props.$childrenInputFieldStyle?.border};
+    border-style: ${props => props.$childrenInputFieldStyle?.borderStyle};
+    border-width: ${props => props.$childrenInputFieldStyle?.borderWidth};
+    border-radius: ${props => props.$childrenInputFieldStyle?.radius};
+    rotate: ${props => props.$childrenInputFieldStyle?.rotation};
+    margin: ${props => props.$childrenInputFieldStyle?.margin};
+    padding: ${props => props.$childrenInputFieldStyle?.padding};
+    .ant-cascader-menu-item-content{
+    font-size: ${props => props.$childrenInputFieldStyle?.textSize};
+    font-style: ${props => props.$childrenInputFieldStyle?.fontStyle};
+    font-family: ${props => props.$childrenInputFieldStyle?.fontFamily};
+    font-weight: ${props => props.$childrenInputFieldStyle?.textWeight};
+    text-transform: ${props => props.$childrenInputFieldStyle?.textTransform};
+    text-decoration: ${props => props.$childrenInputFieldStyle?.textDecoration};
+    color: ${props => props.$childrenInputFieldStyle?.text};
+    }
+`
+
 let CascaderBasicComp = (function () {
   const childrenMap = CascaderChildren;
 
@@ -23,6 +42,7 @@ let CascaderBasicComp = (function () {
       style: props.style,
       labelStyle: props.labelStyle,
       inputFieldStyle:props.inputFieldStyle,
+      childrenInputFieldStyle:props.childrenInputFieldStyle,
       children: (
         <CascaderStyle
           ref={props.viewRef}
@@ -34,8 +54,14 @@ let CascaderBasicComp = (function () {
           placeholder={props.placeholder}
           showSearch={props.showSearch}
           $style={props.inputFieldStyle}
+          $childrenInputFieldStyle={props.childrenInputFieldStyle}
           onFocus={() => props.onEvent("focus")}
           onBlur={() => props.onEvent("blur")}
+          dropdownRender={(menus: React.ReactNode) => (
+  <DropdownRenderStyle $childrenInputFieldStyle={props.childrenInputFieldStyle}>
+    {menus}
+            </DropdownRenderStyle>
+          )}
           onChange={(value: (string | number)[]) => {
             props.value.onChange(value as string[]);
             props.onEvent("change");
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx
index f93d44ff7..4222ce0a8 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx
@@ -6,7 +6,7 @@ import { arrayStringExposingStateControl } from "comps/controls/codeStateControl
 import { BoolControl } from "comps/controls/boolControl";
 import { LabelControl } from "comps/controls/labelControl";
 import { styleControl } from "comps/controls/styleControl";
-import { CascaderStyle, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants";
+import { CascaderStyle, ChildrenMultiSelectStyle, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants";
 import {
   allowClearPropertyView,
   disabledPropertyView,
@@ -40,7 +40,8 @@ export const CascaderChildren = {
   viewRef: RefControl<CascaderRef>,
   margin: MarginControl,
   padding: PaddingControl,
-  inputFieldStyle:styleControl(CascaderStyle)
+  inputFieldStyle:styleControl(CascaderStyle),
+  childrenInputFieldStyle:styleControl(ChildrenMultiSelectStyle)
 };
 
 export const CascaderPropertyView = (
@@ -83,6 +84,9 @@ export const CascaderPropertyView = (
         <Section name={sectionNames.inputFieldStyle}>
           {children.inputFieldStyle.getPropertyView()}
         </Section>
+        <Section name={'Children Input Field Style'}>
+          {children.childrenInputFieldStyle.getPropertyView()}
+        </Section>
       </>
     )}
   </>
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx
index 94b7b0fd9..b08a8276a 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx
@@ -1,5 +1,5 @@
 import { styleControl } from "comps/controls/styleControl";
-import {  InputFieldStyle, LabelStyle, MultiSelectStyle } from "comps/controls/styleControlConstants";
+import {  ChildrenMultiSelectStyle, InputFieldStyle, LabelStyle, MultiSelectStyle } from "comps/controls/styleControlConstants";
 import { trans } from "i18n";
 import { arrayStringExposingStateControl } from "../../controls/codeStateControl";
 import { UICompBuilder } from "../../generators";
@@ -25,6 +25,7 @@ let MultiSelectBasicComp = (function () {
     style: styleControl(InputFieldStyle),
     labelStyle:styleControl(LabelStyle),
     inputFieldStyle:styleControl(MultiSelectStyle),
+    childrenInputFieldStyle:styleControl(ChildrenMultiSelectStyle),
     margin: MarginControl,	
     padding: PaddingControl,
   };
@@ -40,6 +41,7 @@ let MultiSelectBasicComp = (function () {
       style: props.style,
       labelStyle: props.labelStyle,
       inputFieldStyle:props.inputFieldStyle,
+      childrenInputFieldStyle:props.childrenInputFieldStyle,
       children: (
         <SelectUIView
           {...props}
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx
index 4341581e3..5224c1c98 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx
@@ -1,5 +1,5 @@
 import { styleControl } from "comps/controls/styleControl";
-import {  InputFieldStyle, LabelStyle, SelectStyle } from "comps/controls/styleControlConstants";
+import {  ChildrenMultiSelectStyle, InputFieldStyle, LabelStyle, SelectStyle } from "comps/controls/styleControlConstants";
 import { trans } from "i18n";
 import { stringExposingStateControl } from "../../controls/codeStateControl";
 import { UICompBuilder } from "../../generators";
@@ -27,7 +27,8 @@ let SelectBasicComp = (function () {
     value: stringExposingStateControl("value"),
     style: styleControl(InputFieldStyle),
     labelStyle: styleControl(LabelStyle),
-    inputFieldStyle: styleControl(SelectStyle)
+    inputFieldStyle: styleControl(SelectStyle),
+    childrenInputFieldStyle: styleControl(ChildrenMultiSelectStyle)
   };
   return new UICompBuilder(childrenMap, (props, dispatch) => {
     const [
@@ -45,6 +46,7 @@ let SelectBasicComp = (function () {
       style: props.style,
       labelStyle: props.labelStyle,
       inputFieldStyle:props.inputFieldStyle,
+      childrenInputFieldStyle:props.childrenInputFieldStyle,
       children: (
         <SelectUIView
           {...props}
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
index 20ca160f7..fd8f22a7b 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
@@ -40,6 +40,7 @@ import {
   heightCalculator,
   
   SelectStyle,
+  ChildrenMultiSelectStyleType,
 } from "comps/controls/styleControlConstants";
 import { stateComp, withDefault } from "../../generators";
 import {
@@ -186,10 +187,25 @@ const Select = styled(AntdSelect) <{ $style: SelectStyleType & MultiSelectStyleT
   ${(props) => props.$style && getStyle(props.$style)}
 `;
 
-const DropdownStyled = styled.div<{ $style: MultiSelectStyleType }>`
-  ${(props) => props.$style && getDropdownStyle(props.$style)}
+const DropdownStyled = styled.div<{ $style: ChildrenMultiSelectStyleType }>`
+ background-color: ${props => props.$style?.background};
+    border: ${props => props.$style?.border};
+    border-style: ${props => props.$style?.borderStyle};
+    border-width: ${props => props.$style?.borderWidth};
+    border-radius: ${props => props.$style?.radius};
+    rotate: ${props => props.$style?.rotation};
+    margin: ${props => props.$style?.margin};
+    padding: ${props => props.$style?.padding};
   .ant-select-item-option-content {
-    ${(props) => `padding: ${props.$style.padding}`};
+    font-size: ${props => props.$style?.textSize};
+    font-style: ${props => props.$style?.fontStyle};
+    font-family: ${props => props.$style?.fontFamily};
+    font-weight: ${props => props.$style?.textWeight};
+    text-transform: ${props => props.$style?.textTransform};
+    color: ${props => props.$style?.text};
+  }
+  .option-label{
+    text-decoration: ${props => props.$style?.textDecoration} !important;
   }
   .option-label img {
     min-width: 14px;
@@ -229,11 +245,12 @@ export const SelectUIView = (
     mode?: "multiple" | "tags";
     value: any;
     style: SelectStyleType | MultiSelectStyleType;
+    childrenInputFieldStyle: ChildrenMultiSelectStyleType;
     onChange: (value: any) => void;
     dispatch: DispatchType;
   }
-) => (
-  <Select
+) => {
+  return <Select
     ref={props.viewRef}
     mode={props.mode}
     $style={props.style as SelectStyleType & MultiSelectStyleType}
@@ -246,7 +263,7 @@ export const SelectUIView = (
       option?.label.toLowerCase().includes(input.toLowerCase())
     }
     dropdownRender={(originNode: ReactNode) => (
-      <DropdownStyled $style={props.style as MultiSelectStyleType}>
+      <DropdownStyled $style={props.childrenInputFieldStyle as ChildrenMultiSelectStyleType}>
         {originNode}
       </DropdownStyled>
     )}
@@ -282,7 +299,7 @@ export const SelectUIView = (
         </Select.Option>
       ))}
   </Select>
-);
+}
 
 export const SelectPropertyView = (
   children: RecordConstructorToComp<
@@ -295,6 +312,7 @@ export const SelectPropertyView = (
     style: { getPropertyView: () => ControlNode };
     labelStyle: { getPropertyView: () => ControlNode };
     inputFieldStyle: { getPropertyView: () => ControlNode };
+    childrenInputFieldStyle: { getPropertyView: () => ControlNode };
   }
 ) => (
   <>
@@ -343,6 +361,9 @@ export const SelectPropertyView = (
           <Section name={sectionNames.inputFieldStyle}>
             {children.inputFieldStyle.getPropertyView()}
           </Section>
+          <Section name={'Children Input Field Styles'}>
+            {children.childrenInputFieldStyle.getPropertyView()}
+          </Section>
         </>
       )}
   </>
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
index 5ea219698..76dfd10fc 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
@@ -112,6 +112,7 @@ let StepControlBasicComp = (function () {
       font-size: ${props.style.textSize};
       text-transform: ${props.style.textTransform};
       margin: ${props.style.margin};
+      rotate: ${props.style.rotation};
       padding: ${props.style.padding};
       background-color: ${props.style.background};
       border: ${props.style.borderWidth} solid ${props.style.border};
diff --git a/client/packages/lowcoder/src/comps/comps/timerComp.tsx b/client/packages/lowcoder/src/comps/comps/timerComp.tsx
index cf515b20a..ef8575e53 100644
--- a/client/packages/lowcoder/src/comps/comps/timerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/timerComp.tsx
@@ -1,6 +1,6 @@
 import { CompAction, RecordConstructorToView, changeChildAction } from "lowcoder-core";
 import { styleControl } from "comps/controls/styleControl";
-import { timerStyle, timerStyleType } from "comps/controls/styleControlConstants";
+import { startButtonStyle, StartButtonStyleType, timerStyle, timerStyleType } from "comps/controls/styleControlConstants";
 import { UICompBuilder } from "comps/generators/uiCompBuilder";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
 import { Section, sectionNames } from "lowcoder-design";
@@ -24,21 +24,54 @@ const Container = styled.div<{ $style: timerStyleType | undefined }>`
   word-wrap: break-word;
   line-height: initial;
   background-color: ${props => props.$style?.background};
-  border: 1px solid ${props => props.$style?.border};
-  border-radius: ${props => props.$style?.radius};
-  color: ${props => props.$style?.fontColor};
+ font-weight: ${props=>props?.$style?.textWeight};
+border-radius: ${props=>props?.$style?.radius};
+font-size: ${props=>props?.$style?.textSize};
+rotate: ${props=>props?.$style?.rotation};
+text-transform: ${props=>props?.$style?.textTransform};
+color: ${props=>props?.$style?.text};
+border: ${props => props?.$style?.border};
+border-style: ${props=>props?.$style?.borderStyle};
+border-width: ${props=>props?.$style?.borderWidth};
+font-family: ${props=>props?.$style?.fontFamily};
+font-style: ${props=>props?.$style?.fontStyle};
+margin: ${props=>props?.$style?.margin};
+padding: ${props=>props?.$style?.padding};
+background: ${props=>props?.$style?.background};
+text-decoration: ${props=>props?.$style?.textDecoration};
 `;
 
 const ButtonWarrper = styled.div`
   width: 100%;
   min-height: 35px;
   display: flex;
-  justify-content: flex-end;
+  justify-content: center;
   padding-right: 15px;
   padding-bottom: 10px;
-  margin-top: -10px;
+  margin-top: 10px;
 `;
 
+const StyledButton = styled(Button)<{ $style: StartButtonStyleType }>`
+background-color: ${props=>props.$style.background};
+font-weight: ${props=>props.$style.textWeight};
+border-radius: ${props=>props.$style.radius};
+font-size: ${props=>props.$style.textSize};
+rotate: ${props=>props.$style.rotation};
+text-transform: ${props=>props.$style.textTransform};
+color: ${props=>props.$style.text};
+border: ${props => props.$style.border};
+border-style: ${props=>props.$style.borderStyle};
+border-width: ${props=>props.$style.borderWidth};
+font-family: ${props=>props.$style.fontFamily};
+font-style: ${props=>props.$style.fontStyle};
+margin: ${props=>props.$style.margin};
+padding: ${props=>props.$style.padding};
+background: ${props=>props.$style.background};
+text-decoration: ${props=>props.$style.textDecoration};
+`;
+
+
+
 function formatTimeDifference(timeDifference: number) {
   // 计算时、分、秒、毫秒
   const hours = Math.floor(timeDifference / (1000 * 60 * 60));
@@ -64,6 +97,8 @@ const timerTypeOptions = [
 
 const childrenMap = {
   style: styleControl(timerStyle),
+  startButtonStyle: styleControl(startButtonStyle),
+  resetButtonStyle: styleControl(startButtonStyle),
   onEvent: eventHandlerControl(EventOptions),
   defaultValue: stringExposingStateControl("defaultValue", '00:00:00:000'),
   timerType: dropdownControl(timerTypeOptions, 'timer'),
@@ -162,7 +197,8 @@ const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & {
       {formatTimeDifference(elapsedTime)}
       <ButtonWarrper hidden={props.hideButton}>
         <Space>
-          <Button
+          <StyledButton
+            $style={props.startButtonStyle}
             disabled={!buttonState}
             type={timerState === 'stoped' ? "primary" : 'default'}
             onClick={() => {
@@ -170,11 +206,12 @@ const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & {
               else if (timerState === 'started') pauseAction()
               else if (timerState === 'paused') resumeAction()
             }}
-          >{timerState === 'stoped' ? trans('timer.start') : (timerState === 'started' ? trans('timer.pause') : trans('timer.resume'))}</Button>
-          <Button
-            onClick={() => resetAction()}
+          >{timerState === 'stoped' ? trans('timer.start') : (timerState === 'started' ? trans('timer.pause') : trans('timer.resume'))}</StyledButton>
+          <StyledButton
+          $style={props.resetButtonStyle}
+          onClick={() => resetAction()}
           >{trans('timer.reset')}
-          </Button>
+          </StyledButton>
         </Space>
       </ButtonWarrper>
     </Container>
@@ -206,9 +243,17 @@ let AvatarGroupBasicComp = (function () {
         )}
 
         {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          <>
           <Section name={sectionNames.style}>
             {children.style.getPropertyView()}
           </Section>
+          <Section name={sectionNames.startButtonStyle}>
+            {children.startButtonStyle.getPropertyView()}
+          </Section>
+          <Section name={sectionNames.resetButtonStyle}>
+            {children.resetButtonStyle.getPropertyView()}
+          </Section>
+          </>
         )}
       </>
     ))
diff --git a/client/packages/lowcoder/src/comps/comps/transferComp.tsx b/client/packages/lowcoder/src/comps/comps/transferComp.tsx
index b3abb9dc3..1edaff06e 100644
--- a/client/packages/lowcoder/src/comps/comps/transferComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/transferComp.tsx
@@ -28,6 +28,12 @@ const Container = styled.div<{ $style: TransferStyleType }>`
 const getStyle = (style: TransferStyleType) => {
   return css`
     margin: ${style.margin};
+    padding: ${style.padding};
+    border-style: ${style.borderStyle};
+    border-width: ${style.borderWidth};
+    border-color: ${style.border};
+    background: ${style.background};
+    border-radius: ${style.radius};
     max-width: ${widthCalculator(style.margin)};
     max-height: ${heightCalculator(style.margin)};
   `;
diff --git a/client/packages/lowcoder/src/comps/controls/labelControl.tsx b/client/packages/lowcoder/src/comps/controls/labelControl.tsx
index bdbe6a0ed..86e32ce77 100644
--- a/client/packages/lowcoder/src/comps/controls/labelControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/labelControl.tsx
@@ -23,6 +23,7 @@ type LabelViewProps = Pick<FormItemProps, "required" | "help" | "validateStatus"
   labelStyle?: Record<string, string>;
   field?: Record<string, string>;
   inputFieldStyle?: Record<string, string>;
+  childrenInputFieldStyle?: Record<string, string>;
 };
 
 const StyledStarIcon = styled(StarIcon)`
@@ -168,8 +169,9 @@ export const LabelControl = (function () {
     align: dropdownControl(AlignOptions, "left"),
   };
 
-  return new MultiCompBuilder(childrenMap, (props) => (args: LabelViewProps) => (
- <LabelViewWrapper $style={args.style} inputFieldStyle={args.inputFieldStyle}>
+  return new MultiCompBuilder(childrenMap, (props) => (args: LabelViewProps) => 
+  {
+    return <LabelViewWrapper $style={args.style} inputFieldStyle={args.inputFieldStyle}>
       <MainWrapper
         $position={props.position}
         $hasLabel={!!props.text}
@@ -246,8 +248,8 @@ export const LabelControl = (function () {
           {args.help}
         </HelpWrapper>
       )}
-    </LabelViewWrapper>
-))
+    </LabelViewWrapper>}
+)
     .setPropertyViewFn((children) => (
       <Section name={trans("label")}>
         {children.text.propertyView({ label: trans("labelProp.text") })}
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index 15ffa3210..0ebd9c8de 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -817,16 +817,16 @@ export const AvatarStyle = [
     color: '#bfbfbf',
   },
   FILL,
-  {
-    name: "label",
-    label: trans("avatarComp.label"),
-    color: '#000000',
-  },
-  {
-    name: "caption",
-    label: trans("avatarComp.caption"),
-    color: '#a5a5a5',
-  },
+] as const;
+
+export const avatarContainerStyle = [
+  getStaticBackground(SURFACE_COLOR),
+  ...STYLING_FIELDS_CONTAINER_SEQUENCE
+] as const;
+
+export const avatarLabelStyle = [
+  getStaticBackground(SURFACE_COLOR),
+  ...STYLING_FIELDS_SEQUENCE
 ] as const;
 
 export const avatarGroupStyle = [
@@ -838,7 +838,7 @@ export const avatarGroupStyle = [
   getBackground("primary"),
 ] as const;
 
-export const FloatButtonStyle = [
+export const BadgeStyle = [
   {
     name: "badgeColor",
     label: trans("floatButton.badgeColor"),
@@ -846,13 +846,20 @@ export const FloatButtonStyle = [
   },
 ] as const;
 
+export const FloatButtonStyle = [
+  getStaticBackground(SURFACE_COLOR),
+  BORDER,
+  BORDER_STYLE,
+  BORDER_WIDTH,
+] as const;
+
 export const TransferStyle = [
-  MARGIN,	
+  getStaticBackground(SURFACE_COLOR),
+  ...STYLING_FIELDS_CONTAINER_SEQUENCE
 ] as const;
 
 export const CardStyle = [
   getStaticBackground("#ffffff"),
-  BORDER,
   {
     name: "IconColor",
     label: trans("card.IconColor"),
@@ -866,19 +873,24 @@ export const CardStyle = [
     transformer: toSelf,
   },
   CONTAINER_BODY_PADDING,
+  ...STYLING_FIELDS_CONTAINER_SEQUENCE
+] as const;
+
+export const CardHeaderStyle = [
+  getStaticBackground(SURFACE_COLOR),
+  ...STYLING_FIELDS_SEQUENCE,
 ] as const;
 
 export const timerStyle = [
   getBackground("primarySurface"),
-  BORDER,
-  RADIUS,
-  {
-    name: "fontColor",
-    label: trans("timer.fontColor"),
-    color: "#000000",
-  },
+ ...STYLING_FIELDS_SEQUENCE
 ] as const;
 
+export const startButtonStyle = [
+  getBackground("primarySurface"),
+  ...STYLING_FIELDS_SEQUENCE
+] as const
+
 // end
 
 export const LabelStyle = [
@@ -964,6 +976,11 @@ export const MultiSelectStyle = [
   ...ACCENT_VALIDATE,
 ] as const;
 
+export const ChildrenMultiSelectStyle = [
+  ...STYLING_FIELDS_SEQUENCE,
+  getStaticBackground(SURFACE_COLOR)
+] as const;
+
 export const TabContainerStyle = [
   // Keep background related properties of container as STYLING_FIELDS_SEQUENCE has rest of the properties
   ...replaceAndMergeMultipleStyles([...ContainerStyle.filter((style) => ['border', 'radius', 'borderWidth', 'margin', 'padding'].includes(style.name) === false), ...STYLING_FIELDS_SEQUENCE], 'text', [{
@@ -1578,11 +1595,16 @@ export const RichTextEditorStyle = [
 
 export type QRCodeStyleType = StyleConfigType<typeof QRCodeStyle>;
 export type AvatarStyleType = StyleConfigType<typeof AvatarStyle>;
+export type AvatarLabelStyleType = StyleConfigType<typeof avatarLabelStyle>;
+export type AvatarContainerStyleType = StyleConfigType<typeof avatarContainerStyle>;
 export type AvatarGroupStyleType = StyleConfigType<typeof avatarGroupStyle>;
 export type FloatButtonStyleType = StyleConfigType<typeof FloatButtonStyle>;
+export type BadgeStyleType = StyleConfigType<typeof BadgeStyle>;
 export type TransferStyleType = StyleConfigType<typeof TransferStyle>;
 export type CardStyleType = StyleConfigType<typeof CardStyle>;
+export type CardHeaderStyleType = StyleConfigType<typeof CardHeaderStyle>;
 export type timerStyleType = StyleConfigType<typeof timerStyle>;
+export type StartButtonStyleType = StyleConfigType<typeof startButtonStyle>;
 
 export type LabelStyleType = StyleConfigType<typeof LabelStyle>;
 export type InputLikeStyleType = StyleConfigType<typeof InputLikeStyle>;
@@ -1601,6 +1623,7 @@ export type RatingStyleType = StyleConfigType<typeof RatingStyle>;
 export type SwitchStyleType = StyleConfigType<typeof SwitchStyle>;
 export type SelectStyleType = StyleConfigType<typeof SelectStyle>;
 export type MultiSelectStyleType = StyleConfigType<typeof MultiSelectStyle>;
+export type ChildrenMultiSelectStyleType = StyleConfigType<typeof ChildrenMultiSelectStyle>;
 export type TabContainerStyleType = StyleConfigType<typeof TabContainerStyle>;
 export type ModalStyleType = StyleConfigType<typeof ModalStyle>;
 export type CascaderStyleType = StyleConfigType<typeof CascaderStyle>;
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index 163737f1a..eea5b2e03 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -1573,13 +1573,14 @@ export const en = {
     "src": "src",
     "avatarCompTooltip": "The display priority is: image -> characters -> icon. Depending on what is first available.",
     "iconSize": "Icon Size",
-    "avatarBackground": "Icon Background",
+    "avatarBackground": "Background",
     "label": "Label",
     "caption": "Caption",
     "labelPosition": "Position",
     "alignmentPosition": "alignment",
     "text": "Text",
-    "enableDropDown": "Enable DropDown"
+    "enableDropDown": "Enable DropDown",
+    "containerBackground": "Background"
   },
 
   "card": {