How to exclude Materialize style from one element

As of Materialize 0.97.7, there's no way to exclude an element because their CSS selectors are very broad with no exclusions.

For example, their scss looks like:

select {
  background-color: $select-background;
  width: 100%;
  padding: $select-padding;
  border: $select-border;
  border-radius: $select-radius;
  height: $input-height;
}

You just have to manually override Materialize's styles.

Materialize has for-seen this possibility. Take a look at their selector for input:

input:not([type]), input[type=text]:not(.browser-default), input[type=password]:not(.browser-default), input[type=email]:not(.browser-default), input[type=url]:not(.browser-default), input[type=time]:not(.browser-default), input[type=date]:not(.browser-default), input[type=datetime]:not(.browser-default), input[type=datetime-local]:not(.browser-default), input[type=tel]:not(.browser-default), input[type=number]:not(.browser-default), input[type=search]:not(.browser-default), textarea.materialize-textarea

There is everywhere the :not(.browser-default). Considering this, just apply this class to an input:

                <div class="row">
                    <div class="col s3">
                        <div>
                            <input type="text" placeholder="styled"/>
                        </div>
                        <div>
                            <input type="text" class="browser-default" placeholder="not styled"/>
                        </div>
                    </div>
                </div>

Renders as this (screenshot)

You can now add browser-default class to sort of undo the effects of Materializecss.

Because we override many of the default browser styles and elements, we provide the .browser-default class to revert these elements to their original state.

https://materializecss.com/helpers.html#browser-default