使用Create React App进行React样式设计

Question

使用Create React App进行React样式设计

5

我是React的新手。

通常，我们建议您不要在不同的组件中重用相同的CSS类。例如，不要在AcceptButton和RejectButton组件中使用.Button CSS类，我们建议创建一个带有自己的.Button样式的Button组件，可以渲染AcceptButton和RejectButton（但不能继承）。

遵循此规则通常会使CSS预处理器变得不太有用，因为组件组合替代了mixin和嵌套等功能。

我不认为我完全理解它。为什么通过组合使用Sass嵌套和混合功能就变得不那么有用了？有任何例子吗？

这是否也意味着我不应该有全局样式，例如，输入字段的样式？如果我的应用程序中所有输入字段看起来相同或类似，则应为其创建一个组件，仅供样式目的使用？

- Shawn

我认为 https://github.com/styled-components/styled-components 是React / React-Native最常见和推荐的样式库。它使用create-react-app文档推荐的组件构成范例。 - jmancherje

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Yangshun Tay · Accepted Answer

SASS嵌套有助于确保样式不会泄漏到父类之外。通过组件组合，这是自动执行的，因为您将组件嵌套在组件中。

混合是一种在选择器之间重复使用样式的方法。通过组件组合，在JSX中组合来实现重用而非CSS。

旧的方式

CSS

.button {
  color: #fff;

  &.button-accept {
    background-color: green;
  }

  &.button-reject {
    background-color: red;
  }
}

JSX

function AcceptButton() {
  return <button className="button button-accept">Accept</button>;
}

function RejectButton() {
  return <button className="button button-reject">Reject</button>;
}

React之道

const buttonStyles = { color: '#fff' };

function Button(props) {
  return <button style={Object.assign({}, buttonStyles, props.style)}>
    {props.children}
  </button>;
}

const acceptStyles = { backgroundColor: 'green' };

function AcceptButton(props) {
  return <Button style={acceptStyles}>Accept</Button>;
}

const rejectStyles = { backgroundColor: 'red' };

function RejectButton(props) {
  return <Button style={rejectStyles}>Reject</Button>;
}

请注意，这里使用了内联样式，在重复渲染相同元素且样式存在于DOM中的真实情况下，这可能不是理想的。为了解决这个问题，可以尝试一些CSS-in-JS解决方案，比如JSS。

“那是否意味着我也不应该有全局样式，例如输入框的样式？如果在我的应用程序中所有输入框看起来都一样或相似，我应该为此创建一个组件，仅用于样式目的吗？”

这取决于您是否使用任何UI框架。如果您从头开始自己开发，则可能有可能。否则，全局样式几乎是不可避免的。

请注意，这不是二进制决策。许多现有的CSS框架并非专门为React编写，与React鼓励的CSS-in-JS方法不兼容。