Как изменить статический файл CSS при ответе API в ReactJS - PullRequest
Новая
       8

Как изменить статический файл CSS при ответе API в ReactJS

0 голосов
/ 21 декабря 2018

В моем проекте я хочу изменить цвет фона и шрифт текста.Оба свойства записаны в файле CSS.Структура проекта: 

|-myProject
|--public
|--src
|--package.json

Все мои CSS написаны в публичном каталоге, и у меня есть API, который дает ответ цвета фона и шрифта.Теперь я хочу изменить свойства background-color и font в файлах css в соответствии с ответом API.

Ответы [ 3 ]

0 голосов
/ 21 декабря 2018

Я думаю, что лучший способ сделать это - использовать встроенный стиль для элементов, которые вы хотите изменить.При ответе API -> set

const yourVar = {backgroundColor: ##, fontFamily: ##};

0 голосов
/ 21 декабря 2018

Я считаю, что ответ от MTCoster - лучший подход.в зависимости от структуры вашего приложения вы можете использовать новый Context API для создания своего рода провайдера тем, чтобы вы могли передавать пользовательские стили, которые могут храниться в состоянии вашего приложения и загружаться из вашего бэкэндаAPI.Есть несколько инструментов, которые могут помочь вам легче интегрировать эту функцию, например Styled-Components .

со стилевыми компонентами вы можете написать что-то вроде: 

import styled from 'styled-components'
import { YourComponentJSX } from '../somewhere'    
// Wrap the component where you need your custom styles
const YourStyledComponent = styled(YourComponentJSX)`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;

  /* Color the border and text with theme.main */
  // using the short-if to add a default color in case it is not connected to the ThemeProvider
  color: ${props => props.theme.main ? props.theme.main : "palevioletred"};
  border: 2px solid ${props => props.theme.main ? props.theme.main : "palevioletred"};
`;

// Define what props.theme will look like
const theme = {
  main: "mediumseagreen"
};

render(
  <div>
    <ThemeProvider theme={theme}>
      <App>
        <YourStyledComponent>Themed</YourStyledComponent>
      </App>
    </ThemeProvider>
  </div>
);

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

* Код является модификацией из документации по стилевым компонентам

0 голосов
/ 21 декабря 2018

Вместо того, чтобы пытаться изменить базовые таблицы стилей, почему бы не установить эти конкретные свойства, используя атрибуты стиля элементов: 

const divStyle = {
  backgroundColor: /* Some color */,
  fontFamily: /* Some font stack */,
};

function HelloWorldComponent() {
  return <div style={ divStyle }>Hello World!</div>;
}

( адаптировано из Документация React )

...