Question

我正在使用以下代码在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

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

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

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

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

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

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

我（新手）在做什么错了？

谢谢

Answer 1

Margin和padding最多可以包含4个值（右上左下）。这里有5个值
font-sizeL并不适当。是font-size。
边界半径可能正在应用，但是值很小，因此您可能看不到结果。尝试使用5px或10px之类的任何值来查看它是否仍未应用

css修改为以下内容：

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

注意：对于边距和填充，由于全部是通用的，因此仅使用1个值

Answer 2

如果在检查组件时看不到类“ .mybutton”，则表明您未正确传递它。您应该查看react BS文档（我链接了react bootstrap的按钮，因为我假设您正在使用该模块，但我不知道您如何使用BS）https://react-bootstrap.github.io/components/buttons/#api关于如何传递自定义类，或者您可以使用“样式”属性将其内联设置。

尝试两者都可以看到差异，但是建议使用CSS类，内联样式会很快变得混乱。

P.s。如果您发布的是CSS文件，则应使用大括号括起来并添加半冒号

Answer 3

此问题已解决

background-color：＃4582ec！重要颜色：#fff！important

反应js按钮颜色css样式不起作用

3 个答案: