步骤 12：定义定制样式

对于您创建的组件，将像用于站点的主题中 design.json 和 design.css 文件中的任何其他组件那样进行处理。

要为定制组件添加您自己的样式，请确认您注册组件时使用的 id 值。在 appinfo.json 文件中，此项是 "id": "hello-world"。

使用该值，编辑主题的 design.json 文件，并针对该 id 添加要支持的新样式。例如，编辑主题中的 /designs/default/design.json 文件并添加以下代码：

"hello-world": {
  "styles": [{
    "name": "Plain",
    "class": "hello-world-default-style"
  },
  {
    "name": "Gothic",
    "class": "hello-world-gothic-style"
  }]
},

如果您针对组件打开“设置”面板，现在应看到 Plain（默认值）和 Gothic 作为“样式”选项卡中列出的两个选项。不过，在这些选项之间切换将不执行任何操作，直到您实际定义 design.css 文件中列出的样式类。

编辑主题的 design.css 文件，并添加样式的级联样式表 (cascading style sheet, CSS) 类。例如，编辑主题中的 /designs/default/design.css 文件并添加以下代码：

.hello-world-default-style .scs-component-content {
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 24px;
  font-weight: normal; }

.hello-world-gothic-style .scs-component-content {
  font-family: "Century Gothic","CenturyGothic","AppleGothic",sans-serif; 
  font-size: 32px;
  font-weight: bold; }

将文件保存并同步到 Oracle Content Management 实例服务器。