组件未根据 className 设置样式

Question

由于某种原因，设置 className 没有设置我的属性：

export default class MyComponent extends Component {
  render() {
    return(
      <div className={styles.example}>
     </div>
    )
  }
}

const styles = StyleSheet.create({
  example: {
    background: 'black',
    width: '100px',
    height: '100px'
  }
})

它只是呈现类似的东西

<div class="175">
</div>

没有样式信息（“类”175 没有 CSS 规则）

为什么不（如我所料）以 styles__example___2w27N 之类的名称结束，并在浏览器中指定 CSS 规则

.styles__example___2w27N {
    background-color: 'black';
    height: 100px;
    width: 100px;
}

如何应用我的 CSS？

---

如果我使用style={styles.example}（而不是className），我实际上会得到this error：

style 属性需要从样式属性到值的映射，而不是字符串。

我更喜欢使用className，因为

• 我已经指定了悬停和活动样式，style 可以使用这些样式吗？
• 我想手动添加和覆盖一些内联样式

Answer 1

您应该使用<View> 组件而不是<div> 组件，因为这会将<View> 组件映射到您正在使用的每个特定平台的本机视图UI 组件（即：<div>用于 web，android.view 用于 android 等），而不是直接使用 <div> 元素。

这样，<View> 元素和其他 react-native 核心组件被设计为与 StyleSheet 一起使用。你应该将你的风格应用到所有核心组件都有的style prop，而不是className prop：

<View style={styles.example}>
</View>

在网络上查看上述内容时，您会看到源代码中使用了 <div>，但在其他平台上，您会看到正在使用其他原生视图 UI 类型。

Answer 2

样式表指的是React Native...你是在做react-js还是react native？

假设你正在做 react-js（因为 div），那么 react-js 中没有样式表之类的东西......

export default class MyComponent extends Component {
  render() {
    return(
      <div className={styles.example}>
     </div>
    )
  }
}

const styles = {
  example: {
    background: 'black',
    width: '100px',
    height: '100px'
  }
}

我认为您是从 react-native 文档而不是 react-js 复制代码...