---
title: AI 助手方案 - 定制外观
summary: AI 助手 SDK 外观定制指南，介绍如何通过创建 CSS 文件覆盖组件样式来定制对话应用外观。提供修改消息气泡背景颜色的 CSS 示例（.t-agent-message-list-row-start .t-agent-bubble-tile-bubble）及在项目中引入自定义样式文件的代码示例。
---

# 定制外观

使用 **AI 助手 SDK** 开发对话应用，你可以定制这个对话应用的任何外观，只需在项目中创建 CSS 文件，并覆盖对应组件的样式即可。

想了解更多详细信息，请访问[定制外观和功能](https://developer.tuya.com/cn/miniapp-codelabs/codelabs/t-agent-sdk-guide/index.html#9)。

```css
/* 修改消息气泡的背景颜色 */
.t-agent-message-list-row-start .t-agent-bubble-tile-bubble {
  background-color: blue;
}
```

```tsx
import './custom-style.css';

const createAgent = () => {
  // ...
  return agent;
};

export default function ChatPage() {
  // ...
}
```