How to set Material themed TextField to outlined or filled?

Flow
1

I am currently using the Material theme on my project via the @Theme(value = Material.class) annotation. When using the Material theme, the TextFields are not outlined, nor filled, by default. Is it possible to make them outlined or filled? I tried setting the “theme” attribute on the TextFields to outlined, filled, contained, primary… but they had no noticeable affect.

2

I didn’t find the solution, but came up with a different approach… custom styled it to look like outlined.

	:host(#sign-up-field) .vaadin-text-field-container {
		border: 1px solid grey;
		border-radius: 4px;
		padding-left: .5em;
		background: rgb(232 230 239 / 20%);
	}

	:host(#sign-up-field) [part="input-field"]

::after {
opacity: 0;
}

	:host(#sign-up-field) [part="input-field"]

::before, [part=“input-field”]
::after {
height: 0px;
}

3

Hi! The Material theme implementation is still based on the previous Material Design specs, which had the underline style for text fields. There are no official plans at the moment to update the implementation. You can open a new issue in https://github.com/vaadin/vaadin-material-styles/issues if you want to make the request more prominent.