Блог

Главная - Вопросы по программированию - Динамически обновляйте свойство класса css

Динамически обновляйте свойство класса css

#html #css #reactjs

Вопрос:

У меня есть ниже CSS и разметка в ReactJS, и я хочу динамически обновлять свойство фона. Допустим, для немногих случаев он должен быть красным, а для немногих-черным.

    goodOne: {
    position: 'relative',
    'amp;:before': {
        position: 'absolute',    
        background: 'This value needs to be filled dynamically',
        borderRadius: '50%'        
    }
}

<div className = {classes.goodOne}>Hello world</div>

Как я могу это сделать?

Комментарии:

1. Как насчет styled-components.com ?. Вы ищете только классы CSS

Ответ №1:

Документация ReactJSS

 import React from 'react'
import {createUseStyles} from 'react-jss'

const useStyles = createUseStyles({
  myButton: {
    padding: props => props.spacing
  },
  myLabel: props => ({
    display: 'block',
    color: props.labelColor,
    fontWeight: props.fontWeight,
    fontStyle: props.fontStyle
  })
})

const Button = ({children, ...props}) => {
  const classes = useStyles(props)
  return (
    <button className={classes.myButton}>
      <span className={classes.myLabel}>{children}</span>
    </button>
  )
}

Button.defaultProps = {
  spacing: 10,
  fontWeight: 'bold',
  labelColor: 'red'
}

const App = () => <Button fontStyle="italic">Submit</Button>

Пример (Codesandbox)

 import React from 'react';
import { ThemeProvider, createUseStyles } from 'react-jss';

const useStyles = createUseStyles((theme) => ({
  background: {
    color: theme.color,
    background: ({ background }) => background,
    width: 300,
    height: 300
  }
}));

function MyComponent() {
  const [background, setBackground] = React.useState('black');

  const classes = useStyles({
    background: background
  });

  return (
    <React.Fragment>
      <div className={classes.background}>Hello, world</div>

      <button onClick={() => setBackground('red')}>Change to red</button>
      <button onClick={() => setBackground('black')}>Change to black</button>
    </React.Fragment>
  );
}

function App() {
  const theme = {
    color: 'green'
  };

  return (
    <ThemeProvider theme={theme}>
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>

      <MyComponent />
    </ThemeProvider>
  );
}

Комментарии:

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

2. @Лара, codesandbox.io/s/interesting-sea-ig24d (также я обновил ответ)

Метки: