text: import * as tslib_1 from "tslib";
  import * as React from 'react';
  import { TextField } from 'office-ui-fabric-react/lib/TextField';
  import './TextField.Examples.scss';
  import './TextField.Styled.Example.scss';
  function getStyles(props) {
      var required = props.required;
      return {
          fieldGroup: [
              required && {
                  borderTopColor: props.theme.semanticColors.errorText
              }
          ],
          subComponentStyles: {
              label: getLabelStyles
          }
      };
  }
  function getLabelStyles(props) {
      var required = props.required;
      return {
          root: [
              required && {
                  color: props.theme.palette.themePrimary
              }
          ]
      };
  }
  var TextFieldStyledExample = /** @class */ (function (_super) {
      tslib_1.__extends(TextFieldStyledExample, _super);
      function TextFieldStyledExample() {
          return _super !== null && _super.apply(this, arguments) || this;
      }
      TextFieldStyledExample.prototype.render = function () {
          return (React.createElement("div", { className: "docs-TextFieldExample" },
              React.createElement("p", null, "These examples show how components that used to be styled using CSS can be styled using JS styling. The preferred method is JS styling for several reasons: type safety for styling, more predictable behavior, and clear feedback via typing when component changes affect existing styling code."),
              React.createElement(TextField, { label: "Theme Primary Label, Red Top Border (JS):", required: true, styles: getStyles }),
              React.createElement(TextField, { label: "Theme Primary Label, Red Top Border (CSS):", required: true, className: "textField-cssStyled" })));
      };
      return TextFieldStyledExample;
  }(React.Component));
  export { TextFieldStyledExample };
  //# sourceMappingURL=TextField.Styled.Example.js.map