在反应材料-u

Question

我正在使用callemall react材料-ui Stepper组件效果很好，但有一件事我似乎无法做到： 在Stepper中你有步骤。这些步骤有StepButtons，可以有一个图标。图标位于获取样式的范围内：s​​tyles.iconContainer。

不幸的是，那里的宽度硬编码为24px，如果你想拥有更大的图标，这是一个问题。尽我所能，我无法覆盖所述容器的宽度。

这导致以下情况，我有一个带有Icon（大于正常）的按钮，下面有一些文字。这样可以正常工作，但Icon不会居中，因为包含它的范围太小。

看起来像这样（看第二个和第三个图标，它们不居中）：

如果我将24px的硬编码宽度更改为100％，它看起来像这样（好多了）：

不幸的是，如果我改变StepLabel组件本身的代码，我只能做到这一点，我不想这样做。准备样式的代码如下所示：

var styles = {
root: {
  height: orientation === 'horizontal' ? 72 : 64,
  color: textColor,
  display: 'flex',
  alignItems: 'center',
  fontSize: 14,
  paddingLeft: 14,
  paddingRight: 14
},
icon: {
  color: iconColor,
  display: 'block',
  fontSize: 24,
  width: 24,
  height: 24
},
iconContainer: {
  display: 'flex',
  alignItems: 'center',
  paddingRight: 8,
  width: 24 -->this hardcoded thing is giving me headaches
}

};

那么，是否有人建议如何覆盖这种特定风格？

如果你需要在上下文中查看，可以在GitHub | StepLabel找到StepLabel组件的来源。