MdTextField inherits text-align from parents

[datvm]

What is affected?

Component

Description

See Lit Playground. I am not sure if it's intended but right now parents' text-align would affect the text fields as well. Maybe because it's inline-flex instead of inline-block like the standard's input?

  <div style="text-align: center;">
    <md-filled-text-field value="This text is centered" style="width: 100%;"></md-filled-text-field>
    <input value="This text is still left-aligned" style="width: 100%;" />
  </div>

Reproduction

See above.

Workaround

Manually set the text field text-align back.

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

v1.3.0

Browser/OS/Node environment

Windows 11 Pro

Microsoft Edge
Version 122.0.2365.66 (Official build) (64-bit)

Google Chrome
Version 122.0.6261.95 (Official Build) (64-bit)

[asyncLiz]

<input> has text-align: start as a default style. It makes sense to me to add this to the default :host styles of the text field so it doesn't inherit it from parents.

Would appreciate a PR if you can put one together!

[datvm]

@asyncLiz Thanks, I have not worked with SCSS intensively so I am not very familiar with it. Don't know if there is a way so both md-outlined-text-field and md-filled-text-field can inherit the same change.

A small note, currently the internal input has an invalid direction property value:

Also it's pretty hard to contribute to styling from Windows because this command cannot be run on Windows and WSL (Windows Subsystem for Linux) somehow takes a few minutes to finish (GitHub Actions takes only a few seconds). I am not sure if there is a solution for this.

sass --style=compressed --load-path=node_modules --load-path=node_modules/sass-true/sass $(ls -d */ | grep -vE 'node_modules|catalog')