0

Has anyone got known a technique/trick for overriding css style of the Office UI Fabric's component related to Spfx 1.4.0 (for the SP2019)?

More specifically I would like to update TextField red color border, when the validation fails. Update it to the color as in the default case - that correspond to the Peoplepicker style from the @pnp/spfx-controls-react. (The nice to have also would be to add the exclamation icon as before the validation error text.)

current state of the TextField

Peoplepicker style from the @pnp/spfx-controls-react.

TextField parts from the browser developer tools:

developer tools - elements

developer tools - css,

TIA, Mojmir.

1

I saved the validation result in state.

public componentDidUpdate() {

    if(this.state.result){
      $("#TextField10").closest("div").css("border-color","yellow");
    }else{
      $("#TextField10").closest("div").css("border-color","blue");
    }
  }

Test result: enter image description here

Tip:change the id to your element id

| improve this answer | |
  • Hi Amos_MSFT, that seems to be a nice quick workaround runtime solution - thanks for that. – rychlmoj May 20 at 16:42
  • Hovewer I wonder, whether there is a declarative solution - how to generally rewrite component css / or styles for UI Fabric egeneral concept like validation,... I believe, there exist such a possiblity to extend styles by definition... (The following artice github.com/microsoft/fluentui/wiki/Component-Styling tells about styling of newer version of newly called Fluent UI, but it seems to me too advanced to understand it now and it in hig h probability does not suit to the Office UI Fabric React ver. 5.21 (which is related to the Spfx 1.4.x )) – rychlmoj May 20 at 16:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.