显示大写字母的反应警报

Question

enter image description here我正在使用反应警报，但它以大写形式显示消息。任何指针我怎样才能摆脱所有大写字母？示例：对于下面的代码，消息显示为 "TEST MESSAGE" 而不是 "Test Message"

代码：--------

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

msg.info('Test Message', { 时间：0，类型：'info'，主题：'light'，图标： });

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 没用。

显示大写字母的反应警报

react alert showing Uppercase

reactjs

react-redux