Можно ли переопределить стилевые стили существующих компонентов снаружи?

Question

Я хотел бы изменить стиль существующего пакета (без css), который был построен исключительно из стилизованных компонентов (100% css в js).

Итак, допустим, у меня есть пакет: superawesome-styled-components И кодовая база того, что уже использует эти компоненты.

пример:

A.js
import { Button } from 'superawesome-styled-components'

function A() {
   return(
      <Button />
   )
}




B.js
import { Button } from 'superawesome-styled-components'

function A() {
   return(
      <Button />
   )
}




C.js
import { Button } from 'superawesome-styled-components'

function A() {
   return(
      <Button />
   )
}

Как видите, я импортировал кнопку в нескольких файлах. И вот в чем проблема ... Как я могу изменить стиль <Button />, чтобы он изменился во всех случаях. (без необходимости открывать каждый файл и менять компонент кнопки)

без использования css

примечание: у меня не будет доступа к суперстандартным компонентам

Answer 1

Вам нужно изменить класс Button после его импорта, но перед тем, как использовать его (один раз, вверху вашего окончательного выходного файла), чтобы среда, которая его интерпретирует (реагирует?), Увидела изменение.

В зависимости от процесса сборки может потребоваться добавить файл js на страницу после загрузки файла Button, но перед его использованием. Этот файл переопределит свойства js для стиля. Если вы используете загрузчик модулей, это может быть сложно, но это должно быть выполнимо.

Я не знаю, хорошо ли реагируют, но в конечном итоге это просто js, поэтому выясните, где вам нужно внести изменения, и вам нужно будет сделать это только один раз.

Начните с просмотра порядка вывода файлов, который должен дать вам представление о том, какие файлы необходимо обновить в какой момент, чтобы он работал.

Answer 2

Короткий ответ: да, вы можете ... styled-components внутренне назначить className ... Вы можете использовать инструменты chrome dev, чтобы увидеть, что это за className, и переопределить его с помощью CSS ...

См. Рабочий пример здесь: https://codesandbox.io/s/0yzzwk20yn

Предполагается, что основная кнопка будет фиолетового цвета ... но в styles.css япереопределяя его и делая красным ...