Изменить стиль в JSS - PullRequest
Новая
       10

Изменить стиль в JSS

0 голосов
/ 29 апреля 2018

У меня есть следующий компонент, использующий JSS: 

import React from 'react'
import injectSheet from 'react-jss'

const styles = {
  button: {
    backgroundColor: 'pink',
  }
}

class App extends Component {
    changeStyle = () => {
         styles.button.backgroundColor: 'blue' //this obviously doesn't work
    }
    render() {
        return (
            <div className="App">
                <button className={this.props.classes.button} onClick={this.changeStyle}>Switch user</button>
            </div>
        );
    }
}

Это, безусловно, простой вопрос. Когда я нажимаю кнопку, я ожидаю, что фон изменится на «синий», но просто назначение нового цвета не работает.

Ответы [ 3 ]

0 голосов
/ 29 апреля 2018

Условные стили в JSS

В JSS вы должны использовать функцию для вставки имен стилей (в виде строк) в компонент. Я предполагаю, что вы используете injectSheet для вставки классов в подпорки, и просто исключили это из своего примера кода. injectSheet внедрит объект классов, который содержит пары значений ключей, например: [styleObjectPropertyName]: [dynamicInjectedCSSPropertyName], и ​​вставит CSS в заголовок страницы.

Когда вы пытаетесь редактировать объект стиля после того, как это произойдет, он не реагирует, поэтому вам нужно заранее подготовить свои стили CSS и динамически удалить или применить их в коде.

пакет classNames

Вы можете использовать простую библиотеку, такую ​​как classNames , чтобы условно применять стили, как я описал ниже. 

import React from 'react';
import injectSheet from 'react-jss';

const styles = {
  buttonPink: {
    backgroundColor: 'pink',
  },
  buttonBlue: {
    backgroundColor: 'blue',
  },
};

class App extends Component {
  state = {
    isButtonColorPink: true,
  };

  changeButtonColor = () => {

  }

  render() {
    const { buttonColorPink } = this.state;
    const { classes } = this.props;
    return (
      <div className="App">
        <button className={classNames({ 
          [classes.buttonPink]: isButtonColorPink,
          [classes.buttonBlue]: !isButtonColorPink,
        })} onClick={this.toggleStyle}>Switch user</button>
      </div>
    );
  }
}

export default injectSheet(styles)(App);

В качестве альтернативы вы можете просто использовать встроенный стиль для любого динамического стиля - что-то вроде style={{ backgroundColor: this.state.buttonColor }} внутри кнопки, и просто изменить свойство buttonColor с помощью thisState внутри метода класса.

0 голосов
/ 29 августа 2018

В версии 7.1.7+ JSS вы можете использовать значения функций для определения своих стилей. 

const styles = {
  button: {
    color: data => data.color
  }
}

когда вам нужно изменить цвет, вызовите метод update для sheet prop: 

this.props.sheet.update({
  button: {
    color: 'red',
  }
})

Обратите внимание, что по состоянию на август 2018 года ограничения ограничены использованием значений функций

0 голосов
/ 29 апреля 2018

Идеальный шаблон - сохранить цвет кнопки в объекте состояния, а затем обновить это состояние, когда вы хотите изменить цвет.

Одним из решений вашей проблемы является что-то вроде этого: 

import React from 'react'
import injectSheet from 'react-jss'


class App extends Component {

  constructor(props) {
    super(props);
    this.state = {buttonColor: 'pink'};

  }
    changeStyle = (color) => {
      this.setState({
        buttonColor: color
      });
    }

    render() {
        return (
            <div className="App">
                <button className={this.props.classes.button} onClick={ this.changeStyle }>Switch user</button>
            </div>
        );
    }
}
...