CST如何将导入的局部结构覆盖原来的局部结构

CST (Component Structure Type) 或者常说的组件样式表（CSS-in-JS）是一种JavaScript库，它允许你在JavaScript代码中动态地创建、修改和应用CSS样式。当使用CST来处理样式时，它可以让你通过导入的局部样式规则（如`import styles from './styles.css';`），覆盖原有的全局或局部CSS。

CST通常会提供一种机制，比如 emotion.js 的 `css` 函数，styled-components 的 `< styled >` 组件，或者是 Glamor 等库提供的类似功能。当你在组件内部导入并应用新的CSS规则时，这些新规则的优先级可能会高于原始的CSS规则，因为它们是在运行时针对特定组件实例生效的，这被称为“局部作用域”或“基于组件的样式隔离”。

例如，在emotion中：

import { css } from '@emotion/core';
const baseStyles = css`
  color: red;
`;

function MyComponent() {
  return (
    <div>
      {/* 使用CST覆盖baseStyles */}
      <p css={css`color: blue;`}>这是被覆盖的文本</p>
    </div>
  );
}

在这个例子中，`<p>`元素内的文字颜色会变为蓝色，因为它应用了更具体的蓝色样式，覆盖了全局的红色。