语义 UI React Jsx 属性由未渲染的状态修改 css class

Question

在 JSX 属性（语义 UI 组件）下，我列出了一个状态变量，该变量依赖于用户在移动设备或浏览器视图上，如此 NPM 包 here .

JSX 的代码来自语义 UI 反应，因此可能与它有关。我有一个特定的 class 用于以特定方式呈现的 JSX 元素，但是设置变量的设置忽略了此命令。在ComponentDidMount函数中设置了以下代码。

if (isBrowser) {
      this.setState({dependentOnView: "small"})
  } else {
    this.setState({dependentOnView: "huge"})
  }

有问题的 JSX 属性如下。

<List divided selection class="specialHighlight" size={this.state.dependentOnView}><List.Item> <Label color='blue' horizontal> Delayed - Theorizing Now</Label> Exchange </List.Item></List>

状态是在构造函数中设置的，

this.state = {
        dependentOnView: ''
    }

我做错了什么？

当然是正确导入包了，像这样，

import {BrowserView,MobileView,isBrowser,isMobile} from "react-device-detect";

有问题的 css class 被后续运行时完全忽略。

.specialHighlight {
position: absolute;
margin-top: 65vh;
line-height: 2vh;
font-size: 2vh;
margin-left: 3vw;

}

回答：这是一个非常小众的案例，但是在 List 元素中设置大小没有任何作用，但是在 List Item 中设置标签的大小，这是我最初尝试做的，却奏效了。此外，当我返回编辑时忘记使用 {this.state.whateverattribute}.

进一步回答：使用 className 作为属性意味着原生语义 UI css 将覆盖您输入的 css，因此在这个例如我使用 class 但在大多数情况下正确的方法是确实使用 className.

对于以后查看答案的人： 1.确保正确导入包

确保语义 JSX 属性已正确输入状态
确保状态设置正确
尝试在 class 和 [=78= 之间更改 css class 设置]姓名
最后，尝试使用状态变量设置其他元素，无论出于何种原因，语义都极有可能不允许使用某些元素设置某些变量
如果一切都失败了，将原生 css 更改为语义 UI

非常感谢评论员 MikeRos 的意见。

Answer 1

更正您的 'class' > 'className'

这是为你工作codesandbox

import React from "react";
import { isBrowser } from "react-device-detect";
import { List, Label } from "semantic-ui-react";

class Container extends React.Component {
  state = {
    dependentOnView: "huge"
  };

  componentDidMount() {
    if (isBrowser) this.setState({ dependentOnView: "small" });
  }

  render() {
    const { dependentOnView } = this.state;

    return (
      <List
        divided
        selection
        className="specialHighlight"
        size={`${dependentOnView}`}
      >
        <List.Item>
          <Label color="green" horizontal>
            Delayed - Theorizing Now
          </Label>
        </List.Item>
      </List>
    );
  }
}

export default Container;

语义 UI React Jsx 属性由未渲染的状态修改 css class

Semantic UI React Jsx Attribute modified by state not rendering css class

reactjs

semantic-ui