Блог

У меня есть файл React, в этом файле есть глобальное myVar значение, которое может быть либо true, либо false.

В рендере у меня есть несколько кнопок. Их стиль находится в другом связанном файле CSS.

Я хотел бы иметь возможность изменять этот стиль в зависимости от значения myVar .

Это можно было бы сделать любым способом: изменить название классов кнопок, добавить стиль в файле React и т.д.

Я попытался поиграть с этим и заставить его работать, но мне это не удалось.

Соответствующая часть рендеринга:

    <a className = "firstsOne" onClick={() => this.handleClick("bubbleSort")}> Bubble Sort </a>
   <a onClick={() => this.handleClick("selectionSort")}> Selection Sort </a>
   <a onClick={() => this.handleClick("insertionSort")}> Insertion Sort </a>
   <a onClick={() => this.handleClick("quickSort")}> Quick Sort </a>
   <a onClick={() => this.handleClick("mergeSort")}> Merge Sort </a>
  

Соответствующая часть CSS:

 a {
  font-size: 16px;
  line-height: 3.14286;
  font-weight: 400;
  letter-spacing: -.01em;
  font-family: "SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
  color: #9a9a95;

  margin-right: 120px;
}
  

Есть идеи, как этого добиться?

Вы могли бы, например, условно изменить значение на className основе значения вашей переменной.

Допустим, у вас есть 2 варианта класса CSS, .option1 и .option2 .

В вашем компоненте, основываясь на значении myVar , вы могли бы сделать:

 const MyButton = ({ myVar }) => {
  return (
    <button className={myVar === true ? 'option1' : 'option2'}>
      Example button
    </button>
  );
};