react js按钮颜色css样式无效

我正在mypagestyle.styl中编写一个自定义css样式，如下所示

:local .mybutton
  border-radius: 1px
  padding: 2px 2px 2px 2px 
  margin: 2px 2px 2px 2px 
  font-size: 14px
  text-align: center
  background-color: #4582ec
  color: #fff

<Button className={mypagestyle.mybutton}>{"Test"}</Button>

除颜色和背景色外的所有样式都将生效

只是颜色和背景色不起作用

在jsx代码中，我有以下内容

:local .mybutton
  border-radius: 1px
  padding: 2px 2px 2px 2px 
  margin: 2px 2px 2px 2px 
  font-size: 14px
  text-align: center
  background-color: #4582ec
  color: #fff

<Button className={mypagestyle.mybutton}>{"Test"}</Button>

{“测试”}

当我用鼠标右键单击以检查元素时，我看到以下内容

:local .mybutton
  border-radius: 1px
  padding: 2px 2px 2px 2px 
  margin: 2px 2px 2px 2px 
  font-size: 14px
  text-align: center
  background-color: #4582ec
  color: #fff

<Button className={mypagestyle.mybutton}>{"Test"}</Button>

.btn.btn-default，我可以在“样式”选项卡中使用颜色。这是引导样式，但我根本没有指定引导样式，例如“btn btn primary”等

我（新手）做错了什么

谢谢

• 最多可包含4个值（右上-左下）。这里有5个值
• 字体大小不是任何属性。是的
• 边界半径可能已应用，但该值非常小，因此您可能看不到结果。尝试使用任何值，例如5px或10px，以查看它是否仍然未应用

css修改为以下内容：

  border-radius: 1px
  padding: 2px
  margin: 2px 
  font-size: 14px
  text-align: center
  background-color: #4582ec
  color: #fff

---

注意：对于边距和填充，仅使用1个值，因为所有值都是公共的

如果您看不到您的类“.mybutton”检查组件时，这意味着您没有正确传递它。关于如何传递自定义类，您应该查看react-BS文档（我链接react-bootstrap的按钮，因为我假设您正在使用该模块，但我不知道您是如何使用BS的），或者您可以使用属性“styles”内联设置它们

尝试这两种方法以查看差异，但建议使用css类，内联样式可能会很快变得混乱

另外，如果你发布的是CSS文件，你应该用大括号括起来并加上分号，这就解决了这个问题

背景色：#4582ec！重要的

---

颜色：#fff！重要信息

这不是一个好的解决方案。我不知道问题出在哪里，但你绝对不应该使用！重要的是让风格发挥作用。阅读你正在使用的bs框架的文档，尝试不同的css类组合、内联样式等。如果你用它解决了所有的css问题！重要的是，从长远来看，风格之间会有问题。