встроенный стиль ввода текста - PullRequest
Новая
       7

встроенный стиль ввода текста

0 голосов
/ 12 марта 2019

Я использую React с material-ui, я хотел бы применить пользовательские CSS к тексту во входных данных, например: 

<div style={{display: 'flex'}}>
<strong color="blue">{value[0]}</strong>
<strong color="red">{value[1]}</strong>
</div>

Эффективно сделать что-то вроде радуги.

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

Ответы [ 2 ]

2 голосов
/ 12 марта 2019

Все, что вам нужно, чтобы задать тег стиля вместо цветового тега, чтобы было легко достичь

На всякий случай, если свойство является динамическим, используйте $ для динамического значения для вставки

Например, стиль= {{color: 'red'}} Для динамического стиля = {{color: $ {value}}}

1 голос
/ 12 марта 2019

Вы можете split свою value строку в массив символов, и циклически перебирать этот массив и отображать их отдельно с выбранным цветом.

Пример 

const colors = [];
while (colors.length < 100) {
  let color;
  do {
    color = Math.floor(Math.random() * 1000000 + 1);
  } while (colors.indexOf(color) >= 0);
  colors.push("#" + ("000000" + color.toString(16)).slice(-6));
}

class App extends React.Component {
  state = {
    value: "Foobar"
  };

  onChange = ({ target: { value } }) => {
    this.setState({ value });
  };

  render() {
    const { value } = this.state;

    return (
      <div>
        <input value={value} onChange={this.onChange} />
        {value.split("").map((char, index) => (
          <strong key={index} style={{ color: colors[index % colors.length] }}>
            {char}
          </strong>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>
...