如何在反应应用程序中风格化网络组合?

Question

我有我的反应应用程序，我想在其中使用vaadin-date-picker(v. 4.0.5(。 我想通过将z-index更改为1100(例如(来更改一些日期选择器，使它们高于我的模态 有些留在200。

在一些例子中，人们把<style>标签放在里面

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

但是 react 无法识别渲染函数中的<style>属性。 我可以设置 类

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

但它只会改变控制本身，而不是背景部分。有没有办法在反应应用程序中更改某些 Web 组件的样式？

Answer 1

确保正确导入文件

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

同样在反应类中使用类名关键字应用

<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 而不是背景颜色(，并且所有值都必须放在引号中。