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

时间:2016-01-21 15:19:13

标签: javascript reactjs redux

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

感谢您的帮助!

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

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

7 个答案:

答案 0 :(得分:11)

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

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

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

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

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

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

答案 1 :(得分: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

答案 2 :(得分:1)

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

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

或者只是简单的css / scss。

您还可以查看PostCSS

关于你编辑,

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

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

答案 3 :(得分:0)

您有三种选择:

  1. Inline Styles
  2. CSS Stylesheet
  3. CSS Modules
  4. 有一个很棒的Styling React Components&#39;关于所有这些选项的Pluralsight课程

答案 4 :(得分:0)

如果您在项目中使用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: {
    ...
  }
}

答案 5 :(得分:0)

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

建议的接口:

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

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

答案 6 :(得分:0)

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