在 react-native 我们使用 styleSheet.create。我们在 reactjs 中使用什么？
感谢您的帮助！
https://github.com/romseguy/redux-store-visualizer
我在这里没有看到任何样式的使用，但有样式。他是如何做到这一点的，还是我错过了什么？
【问题讨论】：
标签： javascript reactjs redux
类似的选择是执行以下操作：
let styles = {
container: {
backgroundColor: 'red'
}
}
就像上面提到的 cmets 之一，StyleSheet 调用是不必要的，因为浏览器已经支持 CSS。
最后，只需在渲染函数的 return 语句中调用样式内联：
render() {
...
return (
<div style={styles.container} />
)
}
当然，除此之外，您还有其他一些选择，例如使用纯 CSS 样式表和类/标签，但这可能是与您习惯的最相似的选择。
【讨论】：
如果您在项目中使用 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: {
...
}
}
【讨论】：
我创建了一个从 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 组件中使用时具有哪些属性：
要点：https://gist.github.com/Mitacho/fd7049db3dad80d9500851d81ce3153f
【讨论】：
您可以使用内联样式属性，例如：
<div style={{ background: 'red' }}>
或者只是简单的 css / scss。
还有PostCSS你可以看看。
关于你的编辑，
在DevTools.js 中，您可以看到一些作为道具传递给<ChartMonitor /> 的内联样式。
有一些className 定义，例如here，可以让您更改CSS 中的样式。
【讨论】：
您有三个选择：
在 Pluralsight 上有一个出色的 Styling React Components' 课程，涵盖了所有这些选项
【讨论】：