Question

我之前已经写过应用原生的应用程序，并且我即将开始我的第一个反应项目。我注意到一个名为Styled Components的工具：https://www.styled-components.com/docs/basics#motivation

但是，我没有看到任何明显的好处，除了我可以在样式定义中进行媒体查询，所有这些都在与我的组件相同的文件中。

但是我可以说我有这个按钮：

import React from 'react';

const StyledButton = ({ children }) => {
  return (
    <button type="button" style={styles.button}>
      { children }
    </button>
  );
}

const styles = {
  button: {
    backgroundColor: '#6BEEF6',
    borderRadius: '12px',
    border: 'none',
    boxShadow: '0 5px 40px 5px rgba(0,0,0,0.24)',
    color: 'white',
    cursor: 'pointer',
    fontSize: '15px',
    fontWeight: '300',
    height: '57px',
    width: '331px',
  }
}

export default StyledButton;

如何在样式组件中写这个有很大不同？是否只有我的某些样式依赖于某些props样式组件闪耀的情况？

示例，这在react中不起作用：

const StyledButton = ({ children, primary }) => {
  return (
    <button type="button" style={[styles.button, { color: primary ? 'green' : 'red' }]}>
      { children }
    </button>
  );
}

Answer 1

您将遇到纯粹的内联样式的一个早期障碍是缺少伪选择器:hover，:active等。也像你提到的那样，你也不能使用媒体查询。

Styled Components非常棒。还可以看看Aphrodite或Glamourous。

以下是其中一些图书馆https://medium.com/seek-blog/a-unified-styling-language

的精彩比较

Answer 2

如果不需要伪选择器，你可以做像你这样问过的事情：

const StyledButton = ({ children, primary }) => {
  return (
    <button type="button" style={{ ...styles.button, color: primary ? 'green' : 'red' }}>
      { children }
    </button>
  );
}

Styled Components可能是更好的选择。另外，请查看Radium作为另一种选择。处理伪选择器和媒体查询。超级好用。

React：为什么不使用样式对象而不是样式组件？

2 个答案: