Merge pull request #8120 from hy993658052/fix-themecss-0914

fix: 修复源码编辑样式时important问题

packages/amis-core/src/renderers/Item.tsx

@@ -1109,7 +1109,9 @@ export class FormItemWrap extends React.Component<FormItemProps> {
         mobileUI,
         translate: __,
         static: isStatic,
-        staticClassName
+        staticClassName,
+        id,
+        wrapperCustomStyle
       } = props;
 
       description = description || desc;
@@ -1124,7 +1126,10 @@ export class FormItemWrap extends React.Component<FormItemProps> {
               'is-error': model && !model.valid,
               [`is-required`]: required
             },
-            model?.errClassNames
+            model?.errClassNames,
+            wrapperCustomStyle
+              ? `wrapperCustomStyle-${id?.replace('u:', '')}-item`
+              : ''
           )}
           style={style}
         >

packages/amis-core/src/utils/style-helper.ts

@@ -214,7 +214,8 @@ export function formatStyle(
                   continue;
                 }
                 const value = style[k];
-                value && fn(k, value);
+                value &&
+                  fn(k, value + (weights?.important ? ' !important' : ''));
               }
             }
           } else {

packages/amis-editor/src/plugin/Page.tsx

@@ -309,7 +309,7 @@ export class PagePlugin extends BasePlugin {
                     extra: [
                       getSchemaTpl('theme:font', {
                         label: '文字',
-                        name: 'font'
+                        name: 'themeCss.titleControlClassName.font'
                       })
                     ],
                     hiddenOn: 'data.regions && !data.regions.includes("header")'

packages/amis-editor/src/plugin/Tpl.tsx

@@ -261,7 +261,7 @@ export class TplPlugin extends BasePlugin {
             baseExtra: [
               getSchemaTpl('theme:font', {
                 label: '文字',
-                name: 'font'
+                name: 'themeCss.baseControlClassName.font'
               })
             ]
           })

packages/amis-editor/src/renderer/style-control/ThemeCssCode.tsx

@@ -94,27 +94,30 @@ function ThemeCssCode(props: FormControlProps) {
   }
 
   // 递归获取自定义样式
-  function getStyle(style: any, newStyle: PlainObject) {
+  function getStyle(style: any): PlainObject {
+    const newStyle: PlainObject = {};
     if (isEmpty(style)) {
-      return;
+      return newStyle;
     }
     style.nodes.forEach((node: any) => {
       const {prop, value, selector} = node;
       if (value) {
         newStyle[prop] = value;
+        if (node.important) {
+          newStyle[prop] += ' !important';
+        }
       }
       if (node.nodes) {
-        !newStyle[selector] && (newStyle[selector] = {});
-        getStyle(node, newStyle[selector]);
+        newStyle[selector] = getStyle(node);
       }
     });
+    return newStyle;
   }
 
   const editorChange = debounce((value: string) => {
-    const newStyle: PlainObject = {};
     try {
       const style = cssParse(value);
-      getStyle(style, newStyle);
+      const newStyle: PlainObject = getStyle(style);
       onBulkChange &&
         onBulkChange({
           wrapperCustomStyle: newStyle

packages/amis-editor/src/tpl/style.tsx

@@ -619,7 +619,7 @@ setSchemaTpl(
           return {
             ...item,
             visibleOn: visibleOn,
-            name: `themeCss.${classname}.${item.name}:${state}`
+            name: `${item.name}:${state}`
           };
         })
       );

packages/amis/src/renderers/Page.tsx

@@ -783,6 +783,7 @@ export default class Page extends React.Component<PageProps> {
       remarkPlacement,
       headerClassName,
       headerControlClassName,
+      titleControlClassName,
       toolbarControlClassName,
       toolbarClassName,
       toolbar,
@@ -810,7 +811,7 @@ export default class Page extends React.Component<PageProps> {
           className={cx(`Page-header`, headerClassName, headerControlClassName)}
         >
           {title ? (
-            <h2 className={cx('Page-title')}>
+            <h2 className={cx('Page-title', titleControlClassName)}>
               {render('title', title, subProps)}
               {remark
                 ? render('remark', {
@@ -884,6 +885,7 @@ export default class Page extends React.Component<PageProps> {
       baseControlClassName,
       bodyControlClassName,
       headerControlClassName,
+      titleControlClassName,
       toolbarControlClassName,
       asideControlClassName
     } = this.props;
@@ -1056,6 +1058,10 @@ export default class Page extends React.Component<PageProps> {
                 key: 'headerControlClassName',
                 value: headerControlClassName
               },
+              {
+                key: 'titleControlClassName',
+                value: titleControlClassName
+              },
               {
                 key: 'toolbarControlClassName',
                 value: toolbarControlClassName