получить CSS из chrome инструментов разработчика как JavaScript значение объекта

Question

мы только начинаем писать стили в наших реагирующих компонентах, используя makeStyles hook из material-ui.

, поэтому css теперь не является обычным css, а js объектом - выглядит примерно так, например:

const useStyles = makeStyles(() =>
 createStyles({
     root: {
         display: 'flex'
     },
     divider:{
         width:'1px',
         backgroundColor:'rgba(44, 66, 107, 0.15)'
     }
 }),
);

нет, раньше - когда мы используем файлы s css, иногда я "играю" со стилями инструментов chrome dev:

и когда все в порядке, я копирую-> вставляю его в файл s css.

, когда я пытаюсь сделать то же самое здесь, я получаю обычные CSS, которые не допустимый в js объект:

и необходимо изменить его вручную, чтобы он действовал как js значение объекта:

(в этом примере очень мало изменений вручную, но в других примерах может быть много изменений ...

ищет способ получить стили из инструментов chrome dev как "* 1047" * "CSS стилей, а не" обычных "CSS, как сейчас. Конечно, я могу использовать какое-то ручное решение, как этот замечательный:

https://css2js.dotenv.dev/

но я хочу избегайте всего этого копирования-вставки

спасибо.

Answer 1

Использование styled-components

позволяет вам написать действительный код CSS для стилизации ваших компонентов.

import styled from 'styled-components';

const Button = styled.button`
  color: grey;
`;

---

См. Предложение официального документа MUI: https://material-ui.com/guides/interoperability/#styled -компоненты