Question

我是React的新手。

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

遵循此规则通常会使CSS预处理器的用处变得不那么有用，因为mixins和nesting等功能会被组件组合所取代。

我认为我并不完全理解。为什么sass嵌套和混合对组合不太有用？任何一个例子？

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

Answer 1

SASS嵌套有助于确保您的样式不会泄漏到父类之外。使用组件组合时，会自动执行此操作，因为您将组件嵌套在组件中。

Mixins是一种在选择器中重用样式的方法。使用组件组合，重用来自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>;
}

反应方式

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方法一起使用。

使用Create React App创建反应样式

1 个答案:

旧路

反应方式