checkboxlightning-web-componentsslds-styling-hooks
I have a custom table in LWC and standard margin of
<lightning-input
type="checkbox"
variant="label-hidden"
breaks cell center alignment.
I know that since it is a nested component I can't set css directly and I think it is also not possible to change via Styling Hooks?
Edit: just to simplify my question. lightning-input has a default margin-right and I need to get rid of it to center the checkbox in my td table cell correctly
I see its working now by using variant="label-hidden"
<lightning-input-field field-name="AccountId" variant="label-hidden"></lightning-input-field>
Well I had made a silly mistake thinking everything needs a styling hook. I wrote something like this
.custom-css{
--lwc-fontFamily:Roboto-Regular;
--lwc-formLabelFontSize:1rem;
--lwc-colorTextLabel: #000000;
}
Turns out I didnt need to use --lwc-fontFamily. Just font-family would have done the job. But it is weird though. Kept inheriting from
body{
font-family:var(--lwc-fontFamily, Lato);
}
Anyways, the problem was solved using font-family instead of --lwc-fontFamily
Best Answer
Your last screenshot gives it away:
True, 0.5rem is the default. So set your own --lwc-spacingXSmall:
It's all about the "var" keyword here:
Maybe worth pointing out that the unfortunate "slds-checkbox_faux" seems the result of applying the "label-hidden" variant. I haven't checked, but you could play with other variants and leaving the label empty too.