Reactjs 物料界面在React中大写单词

我想将

组件中的文本大写

当前文本：传奇联盟
所需格式：传奇联盟

我曾尝试使用

文本转换：“大写”

，但它并没有按照我的预期工作

我还有一个函数，可以使用纯JS将我的文本大写：

string.toLowerCase()
            .split(' ')
            .map((s) => s.charAt(0).toUpperCase() + s.substring(1))
            .join(' ');

---

问题是我不知道应该如何使用JS函数，因为我想在多个

组件中大写文本，但我不想覆盖材质ui组件。有办法使用道具吗？

现在可以了。我不认为你可以只用css来做这件事，你需要一些JavaCScript

例如：

或

import React，{PureComponent}来自“React”；
从“react dom”导入{render}；
从“物料界面/文本字段”导入文本字段；
类CustomTextField扩展了PureComponent{
状态={
值：“”
};
onChange=事件=>{
const{value}=event.target；
this.setState（{value:this.prettyString（value）}）；
};
prettyString=str=>{
var nextCapital=true；
var newString=“”；
对于（变量i=0；i

这将采用传奇联盟，如果有帮助，将为您提供传奇联盟

功能应用程序（道具）{
常量类=道具类；
返回(
);
}
常量样式=主题=>
创建样式({
第一类：{
textTransform:'小写'，
“&>：第一个字母”：{
textTransform:'大写'
}
}
});

我没有意识到您想要动态地影响值，我的代码是：

import React，{useState}来自“React”；
导入“/App.css”；
从“@material ui/core”导入{TextField}”；
功能应用程序（道具）{
const[value，setValue]=useState（“”）；
常量handleChange=e=>{
设定值(
e、 目标价值
.toLowerCase（）
.拆分（“”）
.map（word=>{
返回word.charAt（0.toUpperCase（）+word.slice（1）；
})
.join（“”）
);
};
返回(
);
}
导出默认应用程序；

将“传奇联盟”转换为“传奇联盟”的简单方法是使用inputProps道具：

---

对于其他人已经解决过很多次的问题，没有必要重写另一个解决方案。您可以使用package来实现这一点

npm i lodash.startcase

用法

从“lodash.startcase”导入startcase；
const capitalizeWord=（value）=>startCase（value.toLowerCase（））
大写单词（'--foo-bar--'）；
//=>“富吧”
大写单词（‘fooBar’）；
//=>“富吧”
大写单词（“uuuufoo\uuubar”）；
//=>“富吧”

我在

物料界面

文档中没有看到它，但是

物料界面/核心

看起来有一个大写实用程序功能。所以

import { capitalize } from '@material-ui/core';

...

const text = 'something';

console.log(capitalize(text)); // 'Something'

---

如果覆盖材质ui组件，则不必覆盖所有文本字段，可以使用“类”属性覆盖单个文本字段，“所以我真的不认为这有什么问题。”蒂姆文克内尔首先感谢你的回答。好的，我理解你的观点。但是如何使用classes属性获得想要的结果呢。因为使用一个带有样式文本转换的类：“大写”正如我所说，它不起作用。@gequotiserde你知道这一点吗？我想做同样的事情，但使其全部大写，似乎无法弄清楚，如果我键入的联盟的图例所有字母都是大写的..但输入应强制使用规则，结果是：联盟的图例

import { capitalize } from '@material-ui/core';

...

const text = 'something';

console.log(capitalize(text)); // 'Something'