Vaadin中如何样式化RadioButtonGroup的输入与标签部分？

Vaadin的RadioButtonGroup基于Web Components实现，内部的<input>和<label>被封装在Shadow DOM中，普通CSS选择器无法直接选中，必须通过组件暴露的**可样式化部件（part）**来定位。以下是针对你设置的myclassname类的正确样式写法：

基础样式选择器示例 #

• 定制整个单选组容器：

.myclassname {
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

• 定制单个单选按钮的容器：

.myclassname vaadin-radio-button {
  display: block;
  margin: 8px 0;
}

• 定制单选按钮的输入框（圆形选择框）：

.myclassname vaadin-radio-button::part(input) {
  width: 16px;
  height: 16px;
  accent-color: #007bff; /* 选中时的颜色 */
}

• 定制单选按钮的标签文本：

.myclassname vaadin-radio-button::part(label) {
  font-size: 14px;
  color: #495057;
  margin-left: 6px;
}

• 定制选中状态下的标签样式：

.myclassname vaadin-radio-button[checked]::part(label) {
  color: #007bff;
  font-weight: 500;
}

关键注意事项 #

1. 确保样式文件的注入方式正确：

   • 如果你用Vaadin Flow，将样式放在frontend/styles/下的全局样式文件（如styles.css），或者通过@CssImport注解导入到目标视图类中。
   • 不要尝试用普通的后代选择器（比如.myclassname input）直接选中内部元素，Shadow DOM会隔离这类选择器。

2. 不同Vaadin版本的部件名称可能略有差异，你可以通过浏览器开发者工具（Elements面板）查看组件的Shadow DOM结构，确认part属性的名称。

内容的提问来源于stack exchange，提问作者jeje