Блог

Я использую styled-components 4.0 в приложении CRA 2.0. По умолчанию имя компонента отображается в DOM следующим образом

 <button class="Button-asdf123 asdf123" />
  

вместо того, чтобы просто

 <button class="asdf123" />
  

Это очень полезно при разработке. Интересно, однако, как мне отключить добавленное имя компонента к классу в рабочей среде, поскольку оно избыточно?

Согласно документу о стилизованных компонентах, вы должны иметь возможность управлять им с помощью опций плагина babel

https://github.com/styled-components/babel-plugin-styled-components

В основном ваша конфигурация webpack для производственной сборки должна выглядеть следующим образом

 {
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "displayName": false
      }
    ]
  ]
}
  

Поскольку вы используете CRA, у вас, вероятно, нет доступа к конфигурации вашего webpack, если вы не извлекаете (если я правильно помню)

Если вы используете макрос styled components, вы сможете сделать это без извлечения, поместив эту конфигурацию в один из файлов, указанных здесь