Making functions that help with complicated designs.

Complex sets of styling rules can be encapsulated within helper functions for improved abstraction. As an illustration, when dealing with the styling of placeholder text, a function is employed to yield an object containing the relevant styles.

// colors
const BLUE = '#3498db';
const getPlaceholderStyles = obj => ({
  '::-webkit-input-placeholder': obj,
  '::-moz-placeholder': obj,
  ':-ms-input-placeholder': obj,
  ':-moz-placeholder': obj,
  ':placeholder': obj,
});
const styles = StyleSheet.create({
  input: getPlaceholderStyles({ color: BLUE }),
});

Although many developers continue to employ CSS for styling their React applications, there is a growing trend in using JavaScript to write styles. This approach has gained popularity as it provides the conveniences of CSS preprocessors without requiring mastery of a new language.

Within CSS-in-JS libraries, a prevalent technique entails creating a JavaScript object for specifying styles. For instance, in the case of my preferred library, Aphrodite, the construction of a style object adheres to this particular methodology.

const styles = StyleSheet.create({
    container: {
        position: 'absolute',
        width: 60,
        height: 40,
    },
)}

The following tips will be discussed to style React app using JavaScript