Question

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

感谢您的帮助！

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

我在这里看不到任何风格的使用，但有造型。他是如何实现这一目标的，还是我错过了什么？

Answer 1

类似的选择是做类似以下的事情：

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

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

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

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

当然，除此之外，您还有其他一些选项，例如使用纯CSS样式表和类/标签，但这可能是您习惯使用的最类似选项。

Answer 2

我从 React Native 到 React 创建了 StyleSheet.create({}) 的 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 3

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

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

或者只是简单的css / scss。

您还可以查看PostCSS。

关于你编辑，

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

有一些className定义，例如here，可以让您更改CSS中的样式。

Answer 4

您有三种选择：

Inline Styles
CSS Stylesheet
CSS Modules

有一个很棒的Styling React Components＆＃39;关于所有这些选项的Pluralsight课程

Answer 5

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

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 6

我仍在寻找一种精简的方法来在react中使用样式时获得TS帮助。

建议的接口：

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

...非常松散。我们无法知道规则是否正确。类似于RN const styles = StyleSheet.create({container: {padding: 10}})的东西真的很有价值。

Answer 7

为了回答原来的帖子，我认为 CSS modules 最像样式表。

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

7 个答案: