Question

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

做类似

的操作是否安全？

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

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

Answer 1

它不是随机的，但是它使用哈希库作为名称，并且如果组件的任何属性发生更改，该库也会更改。实际上，即使您在组件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

当前样式化的组件使用MurmurHash算法创建uniq标识符，然后将哈希数转换为字母名称。

生成CSS类名称：

每个带有uniq props的组件实例都有其自己的CSS类名，该类名是通过相同的MurmurHash算法生成的，但是是从componentId和ratedStyles字符串生成的：

确定样式化的组件类名称是否安全？

1 个答案: