Как стилизовать веб-компонент в приложении React?

Question

У меня есть приложение для реагирования, внутри которого я хочу использовать vaadin-date-picker (v. 4.0.5). Я хочу изменить некоторые средства выбора даты так, чтобы они были выше моего модального окна, изменивz-indexдо 1100 (например), а некоторые остаются на уровне 200.

В некоторых примерах люди ставят <style> тег внутри

<vaadin-date-picker></vaadin-date-picker>

Но реагировать не признает <style>атрибут внутри функции рендеринга. Я могу установить класс для

<vaadin-date-picker class='my-class'>

но он изменяет только сам элемент управления, а не часть фона. Есть ли способ изменить стили некоторых веб-компонентов внутри приложения React?

Answer 1

Убедитесь, что вы правильно импортируете файл

import './yourcssfile.css'; // if in same directory

также в классах реакции применяются с использованием ключевого слова className

<vaadin-date-picker className="my-class">

и, наконец, вы должны следовать документации vaadin. вы не можете добавлять свои собственные стили, если vaadin-date-picker не поддерживает их.

Здесь, в их документации, говорится, что Vaadin Date Picker поставляется с темами дизайна Lumo и Material, и его можно настроить в соответствии с вашим приложением.

Answer 2

На мой взгляд, самый чистый способ использования стилей - это использовать файлы CSS, поэтому

import './classname.css';

Будет моим ответом по умолчанию. Однако, если вы хотите явно установить стили в своем компоненте, вот два примера, как вы можете это сделать:

class Example extends Component {
    getStyle1 = () => {
        return {
            fontWeight: 'bold'
        };
    }
    render () {
        return (
            <div><div style={this.getStyle1()}>style1</div>
            <div style={style2}>style2</div></div>
        )
    }
}

const style2 = {
    fontStyle: 'italic'
}

Помните, что вы возвращаете со своими стилями именно объекты JavaScript, поэтому вы не используете синтаксис CSS с дефисами (например, вы вводите backgroundColor вместо background-color), и все значения должны быть заключены в кавычки.