Question

enter image description here我正在使用react-alert，但它以大写字母显示消息。任何指针我怎么能摆脱所有帽子？示例：对于下面的代码，消息显示为＆＃34; TEST MESSAGE＆＃34;而不是＆＃34;测试消息＆＃34;

代码：--------

this.alertOptions = {
  offset: 50,
  position: 'top right',
  theme: 'dark',
  time: 5000,
  transition: 'scale'
};

msg.info（＆＃39; Test Message＆＃39;，{ 时间：0，输入：＆＃39; info＆＃39;，主题：＆＃39; light＆＃39;，图标： }）;

Answer 1

这是因为，css应用于此text-transform: uppercase。你需要用自定义CSS覆盖它：

.react-alerts .alert .message {
    -webkit-box-flex: 3;
    -webkit-flex: 3;
    -ms-flex: 3;
    flex: 3;
    /* text-transform: uppercase; */remove this
    padding: 8px 10px;
}

Answer 2

如果您使用的是this react-alert，则可以使用其页面本身中指定的选项。

alert.success(<div style={{ textTransform: 'initial' }}>Some Message</div>);

Answer 3

这对我有用：

 #__react-alert__ div div div {
  /* width: auto !important; */
  -webkit-box-flex: 3;
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  text-transform: initial !important;
  font:inherit !important;
  padding: 8px 10px;
}

没有 '!important' 就无法工作
.react-alerts .alert .message 无效。

反应警报显示大写

3 个答案: