如何移除单个Kendo React DropDownButton的内边距（而非全局）

• 添加自定义类名+CSS覆盖
  给目标组件加专属类名：

  <DropDownButton text="i" items={items} className="no-padding-dropdown" />
  

  然后在样式文件里写针对性样式（如果内边距来自组件内部元素，需要调整选择器指向对应元素）：

  .no-padding-dropdown {
    padding: 0 !important;
  }
  

• 使用内联样式
  如果组件支持直接传递style属性，直接写内联样式：

  <DropDownButton text="i" items={items} style={{ padding: 0 }} />
  

• 用CSS-in-JS创建定制组件
  比如用styled-components封装出无内边距的专属组件：

  import styled from 'styled-components';
  
  const NoPaddingDropDown = styled(DropDownButton)`
    padding: 0;
  `;
  
  // 使用时
  <NoPaddingDropDown text="i" items={items} />
  

注：如果内边距是组件内部子元素的样式，需要用浏览器开发者工具定位到具体元素，再调整选择器或样式属性。

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