CssApi

CssApi()

样式挂钩。实例名称:cssApi

挂钩用于修改应用程序的各种样式选项。

建造师

#新CssApi()

实例
externalCodeSetup.cssApi.METHOD\u名称

方法

#添加自定义颜色(新定制颜色)

将新颜色添加到全局颜色对象中,该对象可通过redux在组件中访问store.config.styles.colors. 如果使用现有颜色名称添加新颜色(例如:successColor),这将覆盖现有颜色的值。

参数:
名称 类型 描述
新定制颜色 对象。

具有新颜色的对象

实例
//在自定义代码/index.js中。。。export const applyCustomCode=externalCodeSetup=>{externalCodeSetup.cssApi.addCustomColors({“courseNewColor”:“#800000”});}//下面演示了如何在custom_code/components/StyleComponent.js中使用新添加的全局样式:/。。。从“@src/styles/global”导入{globalStyle}”;const StyleComponent=(props)=>{const globalStyles=useSelector((state)=>globalStyle(state.config.styles))const{colors,global}=globalStyles;returnMargin 10}导出默认样式组件

#addGlobalStyle(样式名称、样式、替换)

将新样式添加到全局样式对象中。注意:具有相同名称的样式将由合并Object.assign.

参数:
名称 类型 描述
样式名 一串

样式名称/句柄

风格 RNStyleValue
代替 布尔值

如果符合事实的,将替换原始样式。否则将使用styleName:[oldStyle,newStyle]

实例
//在自定义代码/index.js中。。。export const applyCustomCode=externalCodeSetup=>{externalCodeSetup.cssApi.addGlobalStyle(“coursesNewStyle”,{margin:10},false);}//下面演示了如何在custom_code/components/StyleComponent.js中使用新添加的全局样式:/。。。从“@src/styles/global”导入{globalStyle}”;const StyleComponent=(props)=>{const globalStyles=useSelector((state)=>globalStyle(state.config.styles))const{colors,global}=globalStyles;returnMargin 10}导出默认样式组件

#setFilterContentCss(filterContentCss)

设置回调函数过滤内容这可以更改在post内容Web视图上使用的CSS。这也将为HTML Gutenberg块提供样式。注意:若Gutenberg未被使用,那个么应用程序将退回到WebView以显示内容

参数:
名称 类型 描述
过滤内容 CssToCssCallback
实例
externalCodeSetup.cssApi.setFilterContentCss((HTMLContentSS,排版)=>(`body,p{font family:${typography.bodyText.family});字体大小:100px;}`);

#设置输入颜色(输入颜色)

覆盖某些输入字段的颜色,例如在测验表单、xProfile编辑表单、管理组详细信息和管理组设置表单中。

参数:
名称 类型 描述
输入颜色 输入颜色
实例
externalCodeSetup.cssApi.SetInputColor({“InputPlaceholder颜色”:“红色”})
Baidu