codepen 上的 reactjs 示例中这些样式来自哪里？

Question

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}

https://codepen.io/gaearon/pen/ozqNOV?editors=0010

Answer 1

当您在 CodePen 上查看笔时，CSS 部分中的代码很可能会应用样式。 HTML 中可能有内联 CSS，也有可能 JavaScript 正在操纵内联样式，但在所有三种情况下，您都将处理 CSS代码。

您发布的 example 正在对 CSS 选项卡中的所有样式进行处理。 HTML 选项卡仅包含一个用于呈现 React 元素的容器。

我们将以您的 FancyBorder 功能为例。

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

您正在构造一个 <div>，class 名称为 'FancyBorder-' + props.color，其中 props.color 是稍后将使用的变量。

继续您的示例，您使用以下代码创建欢迎对话框：

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1>
        Welcome
      </h1>
    </FancyBorder>
  );
}

在此代码中，您将调用 FancyBorder 函数并传递 color="blue"，它在原始函数中被引用为 props.color。它现在运行 'FancyBorder-' + props.color 生成一个 class 命名为：FancyBorder-blue.

现在在 CSS 部分，您会看到您的 FancyBorder-blue 已经设置为 class 并且已应用样式它：

.FancyBorder-blue {
  border-color: blue;
}

这个特定的 CSS 在我们刚刚创建的框周围应用了一个蓝色边框。希望这能解决问题。

Answer 2

想通了。在 CodePen 中以编辑模式打开时，这些样式在选项卡最小化时不可见。将它们拖动打开或更改 link 就足以使它们默认打开。只是一个 CodePen 功能 =)

看区别：

https://codepen.io/gaearon/pen/ozqNOV?editors=0010

https://codepen.io/gaearon/pen/ozqNOV

.FancyBorder {
  padding: 10px 10px;
  border: 10px solid;
}

.FancyBorder-blue {
  border-color: blue;
}

.Dialog-title {
  margin: 0;
  font-family: sans-serif;
}

.Dialog-message {
  font-size: larger;
}

codepen 上的 reactjs 示例中这些样式来自哪里？

Where do these styles come from in reactjs examples on codepen?

css

reactjs

codepen