关于西门子低代码如何写组件的CSS样式

参考文档（Implement Styles | Siemens Low-Code Documentation）

首先我们要先清楚西门子低代码 studio pro的CSS样式文件存放在哪里，首先我们要定位工作台APP-> Style ->Web，在custom-variables.scss文件下更改并且定义西门子低代码所有可供更改组件的样式。

在这里我们可以通过更改样式文件属性值来修改西门子低代码组件里面的默认可供给值，假如我们想要给组件按钮加一个颜色，我们可以在组件按钮的General属性下选择Button Style的值(primary蓝色，success绿色，warning黄色，danger红色)四种颜色，如果我们想要其他颜色就可以选择在$brand-primary(-success,-warning,-danger,-default)这里，修改西门子低代码系统默认可供选择的颜色，我们可以更改为黑色。

当我们打开组件按钮再次选择primary属性时，按钮颜色就会改为黑色。

不过通过这个方法修改西门子低代码样式会改变整个系统的颜色，如果我们想要修改单一组件的样式的话，就可以通过以下两个方式来完成。

（一）在西门子低代码单一组件下写Style CSS样式来完成

我们可以在每个组件下点击Appearance通过修改Common的属性值来修改，其中Class是西门子低代码组件的属性类，我们可以在这里输入我们自己自定义的CSS样式属性类，一般用来自定义组件样式，如果想要修改西门子低代码组件的基本样式，我们就可以在Style里面定义我们想要更改的属性和其对应的值。

在Style这里我们可以自行定义组件文本的大小，背景和颜色，组件控件的排版，按钮的颜色，列表视图，警报和其他各种元素。

假如我们想要修改text文本框的大小值，除了可以在Render mode里选择文本框字体的大小外也可以在Style下面进行操作。

第一步：在Style里面写入前端CSS代码，例如font-size:50px;来修改文字元素的大小为50px(50个像素单位的大小)。

效果图：

如果我们想要修改文本框的颜色和字体颜色，就可以在Style里定义text文本框background-color:lightblue;color:red;font-size:50px；注意：当一个属性要改变多个样式元素时要用；隔开,在CSS样式属性中表达颜色可以用单词或者#+数字+字母的形式表达，例如红色red(#FF0000)，具体的颜色参数可以参考：https://blog.csdn.net/singit/article/details/49179643 

效果图: 

（二）利用动态属性类Dynamic classes来完成对于组件样式的定义方式

除了在组件Style下编写CSS样式，西门子低代码也可以通过输入表达式的方式来实现。Dynamic classes是西门子低代码组件的动态类属性，可用于页面组件的条件可编辑性，组件的条件可见性，文本小部件的内容属性，从而可以让我们根据某些特定的条件以不同的方式定义组件所呈现的样式，主要就是通过写表达式的方法来动态更改组件的样式。

首先要使用Dynamic classes定义组件样式，必须先确保组件包含在一个实体数据视图内。例如按钮组件我们要先将按钮定义进一个实体提供的数据流里面，先创建一个实体user，添加name属性String类型和number属性int类型。

然后在新页面下添加data view数据视图，添加user实体。

弹出的提示信息，选择yes。

这样我们就添加了一个user的数据视图。

接着就可以在save按钮上定义Dynamic classes动态类属性了。

Available variables是我们所创建的实体对象，用$符号加currentObject的方式调用这个实体和其关联实体对象。

其中Expression wizard可以选择表达式的具体关联实体的属性参数，使用斜杠/访问对象的属性和关联，注意：写表达式时不可以输入纯文本，文本需要用单引号括起来。

Variable可以选定我们这个组件关联实体的对象属性，在这里可以手动输入函数表达式来定义组件的样式，比如我们想要通过判断属性值name里面的值为空时动态更改按钮为蓝色，不为空时动态更改为红色，就可以用if语句来执行显示当name属性值为空时，按钮save就会呈现蓝色，否则就会出现红色。

首先我们得先在西门子低代码 CSS样式里手动添加自定义CSS样式文件，先在Style/web文件夹下创建color.scss样式文件。

接下来在color.scss样式文件里添加color1和color2两个样式类，并且输入对应的属性值，这里我自定义了两种颜色变换，注意: .scss文件类名要用.号作为开头。

然后我们要在main.scss主题样式文件里导入color.scss文件，用来让项目引用color.scss的样式。

最后我们就可以在表达式中用if语句进行判断和用引号’’加入类名的方式，实现动态更改按钮的颜色。当name属性值为空时，按钮出现蓝色，当按钮不为空时，按钮出现红色。

综上就是我们可以在西门子低代码更改组件CSS样式的两种方法。

关于Mendix公司

在一个数字化先行的世界中，客户希望自己的每一项需求都得到满足，员工希望使用更好的工具来完成工作，而企业意识到自己只有通过全面数字化转型才能生存并取得成功。Mendix公司，a Siemens business正在迅速成为企业数字化转型的推动者。其业内领先的低代码平台和全方位的生态系统整合最先进的技术，帮助企业创造出提高互动性、简化操作和克服IT瓶颈的解决方案。Mendix公司以抽象化、自动化、云和协作为四大支柱，大幅提升开发者的生产力，并且依靠自己的工程协作能力和直观的可视化界面，帮助大量不熟悉技术的“公民”开发者在他们所擅长的领域创建应用程序。Mendix公司是权威行业分析师眼中的领导者和远见者，也是一个云原生、开放、可扩展、敏捷和饱经考验的平台。从人工智能和增强现实，到智能自动化和原生移动，Mendix公司已成为数字化先行企业的骨干。Mendix公司企业低代码平台已被全球4000多家领先的公司采用。

感谢阅读！