Modify LWC component styles

Question

I came across a requirement where I wanted to change the width of the Date & Time pickers of the

<lightning-input></lightning-input> 

LWC component from component library. It took some time for me to figure out I might not be able to set the styles of items within an LWC component because of the Shadow DOM restrictions.

Is there any easy way to fix this?

Answer 1

According to DOM Access Containment it is supposed to behave like that. There is nothing to fix there.

I would suggest to use 2 inputs for your use-case and restrict widths on them.

Sample code:

HTML:

<template>
    <div>
        <lightning-input class="data-input" type="date" name="input1" label="date"></lightning-input>
        <lightning-input class="time-input" type="time" name="input1" label="time"></lightning-input>
    </div>
</template>

CSS:

.data-input {
    width: 5rem;
    display: inline-block;
}
.time-input {
    width: 10rem;
    display: inline-block;
}

Output: