office-ui-fabric-react/lib/components/TextField/examples/TextField.Styled.Example.js

Reusable React components for building experiences for Office 365.

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