在 react-native 中我们使用 styleSheet.create。我们在reactjs中使用什么？

Question

在 react-native 中我们使用 styleSheet.create。我们用reactjs干什么？

感谢您的帮助！

https://github.com/romseguy/redux-store-visualizer

我在这里没有看到任何样式的使用，但是有样式。他是怎么做到的，还是我遗漏了什么？

Answer 1

您可以使用内联样式属性如：

<div style={{ background: 'red' }}>

或者简单的 css / scss.

还有 PostCSS 您可以查看。

关于您的编辑，

在 DevTools.js 中，您可以看到一些内联样式作为 props 传递给 <ChartMonitor />。

有一些 className 定义，例如 here 允许您更改 CSS 中的样式。

Answer 2

类似的选择是执行如下操作：

let styles = {
  container: {
    backgroundColor: 'red'
  }
}

如上述评论之一，StyleSheet 调用是不必要的，因为浏览器已经支持 CSS。

最后，只需在渲染函数的 return 语句中内联调用样式：

render() {
  ...
  return (
    <div style={styles.container} />
  )
}

当然，除此之外，您还有一些其他选择，例如使用普通 CSS 样式表和 classes/tags，但这可能是与您最相似的选择习惯了

Answer 3

您有三个选择：

Pluralsight 上有一门很棒的 Styling React Components 课程涵盖了所有这些选项

Answer 4

如果您在项目中使用 TypeScript，您可以这样定义样式表：

interface StyleSheet {
  [key: string]: React.CSSProperties;
}

然后创建与来自 RN 的 StyleSheet.create 非常相似的样式。

const styles: StyleSheet = {
  navStyle: {
    listStyleType: 'none',
    margin: 0,
    padding: 0,
    display: 'flex',
    flexDirection: 'row',
    width: '100%'
  },
  anotherStyle: {
    ...
  }
}

Answer 5

我创建了 StyleSheet.create({}) 从 React Native 到 React 的 TypeScript 实现。

import React from "react";

type CSSProperties = {
  [key:string]: React.CSSProperties;
};

export class StyleSheet {
  static create<Styles extends CSSProperties>(styles: Styles): Styles {
    return styles;
  };
};

用法：

创建一个包含 React 的 CSS 属性的对象：

const styles = StyleSheet.create({
  main: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",

    height: "100vh",
  },

  loadingContainer: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
  },

  loadingText: {
    color: "#dcdcdc",

    fontSize: "1.125rem",
    fontWeight: 500,
  },
});

现在您知道在 Reactjs 组件中使用该对象时它具有哪些属性：

take a look at a sample

要点：https://gist.github.com/Mitacho/fd7049db3dad80d9500851d81ce3153f

Answer 6

抱歉来晚了，但是有一个简单的 npm 包可以完全满足您的要求。检查一下：https://www.npmjs.com/package/reactjs-stylesheet
就像在本机反应中一样使用它：

import Stylesheet from "reactjs-stylesheet";
const styles = Stylesheet.create({
    myStyle: {
        backgroundColor: "#81D4FA",
        color: "#263238",
        width: "100px",
    },
});

在 react-native 中我们使用 styleSheet.create。我们在reactjs中使用什么？

In react-native we use styleSheet.create. What do we use in reactjs?

javascript

reactjs

redux