Create a custom style for a custom control

Version: 2023.2+

This example demonstrates how to use custom USS variables in a custom control.

Example overview

This example creates a custom control that reads two colors from USS and uses them to generate a texture.

You can find the completed files that this example creates in this GitHub repository.

先决条件

This guide is for developers familiar with the Unity Editor, UI Toolkit, and C# scripting. Before you start, get familiar with the following:

• UI Builder
• Visual Tree
• UXML
• USS

Create the custom control

Create a C# script to define the custom control and a USS file to define the custom style.

1. Create a Unity project with any template.
2. Create a folder named create-custom-style-custom-control to store your files.
3. In the ExampleElementCustomStyle folder, create a C# script named ExampleElementCustomStyle.cs and replace its contents with the following:

[!code-cs]

Create the custom control and custom style

Create a USS file named ExampleElementCustomStyle.uss and replace its contents with the following:

[!code-css]

Use the custom control in UI Document

Create a UI Document to use the custom control and apply the custom style to the custom control.

1. In the ExampleElementCustomStyle folder, create a UI Document named ExampleElementCustomStyle.uxml.
2. Double-click ExampleElementCustomStyle.uxml to open it in the UI Builder.
3. Select Library > Project > UIToolkitExamples, and drag ExampleElementCustomStyle to the Hierarchy window. A grey square appears in the Viewport window.
4. Add the ExampleElementCustomStyle.uss file as an existing USS. This applies the custom USS variables to the square.

其他资源

• Create custom controls
• BEM standard