有什么方法可以在materializedcss中将按钮的标题从大写字母更改为小写字母吗？

Question

我正在使用物化CSS来设计我的个人网站。当我使用该按钮时，其标题始终以大写字母显示。我试图改变它，但没有成功。有人可以帮我解决这个问题吗？

Answer 1

将其添加到您的 CSS 中

.btn {
    text-transform: unset !important;
}

或者如果您只想更改特定按钮，请将其添加到您的 CSS 中：

.no-uppercase {
     text-transform: unset !important;
}

然后只需将

no-uppercase

添加到所需按钮的类即可。

---

感谢@ziganotschka

更新到新的语法

Answer 2

语法发生了变化

• 此语法现已弃用：

.btn {
  text-transform: none !important;
}

• 现在使用以下语法（截至 2021 年 2 月 2 日）：

.btn {
  text-transform: unset !important;
}

Answer 3

是的，您只需要在 Button 标签中使用 css 即可，如下所示

<Button style={{color:'white',textTransform:'none'}}>Home</Button>

Answer 4

.btn {
  text-transform: initial !important;
}

If you use Vuetify, can follow the following.

.btn span.v-btn__content{
  text-transform: initial !important;
}

期待为您提供帮助。

Answer 5

使用：文本无

<v-btn class="text-none">Your Text</v-btn>

Answer 6

你必须重写 css 文件中的按钮类，如下所示

span.MuiButton-label {
 text-transform: none;
 font-family: sans-serif !important; //change any font style
}