global styles styled components code example

Example 1: styled components props typescript

interface YourProps {
  invalid: boolean
}

const Input = styled.input`
  border: ${(p: YourProps) => p.invalid ? 'red' : 'blue'};
`

Example 2: styled components attrs

export const TextInputElement = styled.TextInput.attrs(props => ({
  placeholderTextColor: props.ColorPlaceholder,
}))`
  font-size: 15px;
  line-height: 18px;
  color: '#000';
`;

Example 3: create global styles in styled components

import { createGlobalStyle } from 'styled-components'

const GlobalStyle = createGlobalStyle`
  body {
    color: ${props => (props.whiteColor ? 'white' : 'black')};
  }
`

// later in your app

<React.Fragment>
  <GlobalStyle whiteColor />
  <Navigation /> {/* example of other top-level stuff */}
</React.Fragment>import { createGlobalStyle } from 'styled-components'
const GlobalStyle = createGlobalStyle`  body {    color: ${props => (props.whiteColor ? 'white' : 'black')};  }`
// later in your app
<React.Fragment>  <GlobalStyle whiteColor />  <Navigation /> {/* example of other top-level stuff */}</React.Fragment>
/**
 * Reset the text fill color so that placeholder is visible
 */
.npm__react-simple-code-editor__textarea:empty {
  -webkit-text-fill-color: inherit !important;
}

/**
 * Hack to apply on some CSS on IE10 and IE11
 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /**
    * IE doesn't support '-webkit-text-fill-color'
    * So we use 'color: transparent' to make the text transparent on IE
    * Unlike other browsers, it doesn't affect caret color in IE
    */
  .npm__react-simple-code-editor__textarea {
    color: transparent !important;
  }

  .npm__react-simple-code-editor__textarea::selection {
    background-color: #accef7 !important;
    color: transparent !important;
  }
}