office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
55 lines (54 loc) • 2.21 kB
JavaScript
import * as React from 'react';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { Text } from 'office-ui-fabric-react/lib/Text';
import { Stack } from 'office-ui-fabric-react/lib/Stack';
import './TextField.Styled.Example.scss';
export var TextFieldStyledExample = function () {
return (React.createElement(Stack, { tokens: { childrenGap: 15 } },
React.createElement(Text, { styles: { root: { maxWidth: 600 } } }, "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" })));
};
function getStyles(props) {
var required = props.required;
return {
fieldGroup: [
{ width: 300 },
required && {
borderTopColor: props.theme.semanticColors.errorText
}
],
subComponentStyles: {
label: getLabelStyles
}
};
}
function getLabelStyles(props) {
var required = props.required;
return {
root: [
required && {
color: props.theme.palette.themePrimary
}
]
};
}
/*
This is the SCSS used in the CSS styling example.
If exporting to CodePen, paste this into the CSS section.
-------------------------------------------------------------------------------------------
// In the real SCSS, these variables are defined elsewhere and adjusted based on the theme.
// The values provided below are from the default theme.
$errorTextColor: #a80000;
$ms-color-themePrimary: #0078d4;
.textField-cssStyled {
.ms-TextField-fieldGroup {
width: 300px;
border-top-color: $errorTextColor;
}
.ms-Label {
color: $ms-color-themePrimary;
}
}
*/
//# sourceMappingURL=TextField.Styled.Example.js.map