How to stylize web compoenent inside react app?

Question

I have my react app inside which i want to use vaadin-date-picker (v. 4.0.5). I want to change some of the date pickers in a way that they would be above my modal by changing z-index to 1100 (for example) and some to stay at 200.

In some examples, people put <style> tag inside

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

But react is not recognizing <style> attribute inside render function. I can set class for

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

but it only changes control itself and not the backdrop part. Is there a way to change styles of some web components inside react app?

If the class is working but not producing the desired effect, it sounds like you may need to change the styles for some element inside of the web component and not just on wrapper element. — Chris B., Dec 27 '19 at 15:31
@ChrisB.it is working but date picker is consist of two parts. Control part that looks like input is changing with my css class attached with "class" word. But the backdrop part is not. — Alexandr Accord, Dec 27 '19 at 17:26

score 0 · Answer 1 · answered Dec 27 '19 at 15:51

Make sure you are importing the file correctly

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

also in react classes are applied using className keyword

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

and lastly you have to follow the documentation vaadin. you can't add your own styles if the vaadin-date-picker doesn't support it.

Here in their documentation it says Vaadin Date Picker comes with both Lumo and Material design themes, and it can be customized to fit your application.

score 0 · Answer 2 · answered Dec 27 '19 at 16:54

The cleanest way to use styles in my opinion is to use CSS files, so

import './classname.css';

Would be my default answer. However, if you want to set styles explicitly in your Component, these are two examples, how you can do it:

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'
}

Remember that it's JavaScript objects that you return with your styles, so you don't use CSS syntax with dashes (e.g. you type backgroundColor instead of background-color) and all values must be put in quotes.

How to stylize web compoenent inside react app?

2 Answers2