以样式化组件类名称为目标是否安全？

Question

我使用样式化组件来构建应用程序，需要在另一个页面上重用一些组件，但一些样式属性略有不同。

做这样的事情是否安全

div.Card-sc-17xtaz4-0 {
  box-shadow: unset;
  margin-top: unset;
  margin-bottom: unset;
}

或者与样式组件关联的类名是否可能在构建时更改？

Answer 1

它不是随机的，但它使用一个哈希库作为名称，如果您的组件的任何 prop 发生变化，它就会改变。实际上，即使您在组件 CSS 中添加额外的空格字符，它也会改变。

查看下面的代码片段并尝试取消注释该color:red;行，您将看到 className 发生了变化。完全像以前一样评论它，你会得到旧的 className 。

const Container_DIV = window.styled.div`
  /* color: red; */
`;

function App() {
  const container_ref = React.useRef(null);
  const [classList,setClassList] = React.useState(null);
  
  React.useEffect(() => {
    setClassList(container_ref.current.classList);
  },[]);
  
  return(
    <Container_DIV
      ref={container_ref}
    >
      I am Container_DIV, a styled-component!
      <div>
        <b>My className is: </b>{classList}
      </div>
    </Container_DIV>
  );
}

ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<script src="//unpkg.com/styled-components/dist/styled-components.min.js"></script>
<div id="root"/>

来自： https : //medium.com/styled-components/how-styled-components-works-618a69970421

目前 styled-components 使用 MurmurHash 算法来创建 uniq 标识符，然后将哈希数转换为字母名称。

生成 CSS 类名：

每个带有 uniq props 的组件实例都有它自己的 CSS 类名，它是通过相同的 MurmurHash 算法生成的，但是来自 componentId 和评估的样式字符串：