如何查找哪个类名属于哪个元素

Question

我正在开发一个使用样式组件的 React 应用程序。有时真的很难分辨样式来自哪里。 （因为类名只是随机字母）。有没有一种简单的方法来判断哪种样式属于哪个组件。或者以某种方式控制自动生成的CSS类？有没有办法例如将组件名称附加到自动生成的 css 类中？

Answer 1

您可以尝试使用 attrs 函数和模板文字根据组件名称动态生成类名称。像这样的东西，

import styled from 'styled-components'

const StyledComponent = styled.div.attrs(props => ({
  className: `my-component ${props.className || ''}`,
}))`
  //Your component styles go here...
`

export default StyledComponent

现在，当您在应用程序中使用此 StyledComponent 时，除了 styled-components 生成的任何其他类名之外，它将始终具有类名“my-component”。
请记住，此方法向样式组件的所有实例添加固定的类名。如果您需要一个更动态的解决方案，其中类名包含组件名称，您可以使用 JavaScript 的 displayName 属性。

import styled from 'styled-components'

const StyledComponent = styled.div.attrs(props => ({
  className: `${props.className || ''}`,
}))`
  // Your component styles go here...
`

StyledComponent.displayName = 'StyledComponent'

export default StyledComponent

现在，displayName 将用作生成的类名称的一部分。但是，请注意，由于优化，默认情况下这在生产版本中不起作用。在开发过程中，您应该看到包含组件的 displayName 的类名称。