1

我有我想在其中使用的反应应用程序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 应用程序中某些 Web 组件的样式？

4

2 回答 2

0

在我看来，使用样式最简洁的方法是使用 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）并且所有值都必须放在引号中。

于 2019-12-27T16:54:25.193 回答
0

确保正确导入文件

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

也在反应类中使用 className 关键字应用

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

最后，您必须遵循文档 vaadin。如果 vaadin-date-picker 不支持，则无法添加自己的样式。

在他们的文档中，它说 Vaadin Date Picker 带有 Lumo 和 Material 设计主题，并且可以自定义以适合您的应用程序。

于 2019-12-27T15:51:36.537 回答