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

Question

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

做类似

的事情安全吗

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

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

Answer 1

它不是随机的，但它使用哈希库作为名称，如果您的组件的任何 prop 发生变化，该名称也会发生变化。实际上，即使您在组件 CSS.

中添加一个额外的 space 字符，它也会发生变化

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

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

Currently styled-components uses MurmurHash algorithm to create uniq identifier and then converts the hash number to alphabetic name.

Generating CSS class name:

Each component instance with uniq props has it’s own CSS class name which generated by means of the same MurmurHash algorithm but from the componentId and the evaluatedStyles string:

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

Is it safe to target styled components class names?

reactjs

styled-components