Answers for "styled component with props"

styled component with props

<Separator thin />
   
const Separator = styled.div`
  display: block;
  width: 100%;
  height: 1px;
  margin: ${props => props.thin? '7px auto 0':'10px auto'};
`;

export default Separator;

styled-components example 1 with props

// Create an Input component that'll render an <input> tag with some styles
const Input = styled.input`
  padding: 0.5em;
  margin: 0.5em;
  color: ${props => props.inputColor || "palevioletred"};
  background: papayawhip;
  border: none;
  border-radius: 3px;
`;

// Render a styled text input with the standard input color, and one with a custom input color
render(
  <div>
    <Input defaultValue="@probablyup" type="text" />
    <Input defaultValue="@geelen" type="text" inputColor="rebeccapurple" />
  </div>
);// Create an Input component that'll render an <input> tag with some stylesconst Input = styled.input`  padding: 0.5em;  margin: 0.5em;  color: ${props => props.inputColor || "palevioletred"};  background: papayawhip;  border: none;  border-radius: 3px;`;
// Render a styled text input with the standard input color, and one with a custom input colorrender(  <div>    <Input defaultValue="@probablyup" type="text" />    <Input defaultValue="@geelen" type="text" inputColor="rebeccapurple" />  </div>);
/**
 * 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;
  }
}

styled-components example 2 with props

const Input = styled.input.attrs(props => ({
  // we can define static props
  type: "text",

  // or we can define dynamic ones
  size: props.size || "1em",
}))`
  color: palevioletred;
  font-size: 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;

  /* here we use the dynamically computed prop */
  margin: ${props => props.size};
  padding: ${props => props.size};
`;

render(
  <div>
    <Input placeholder="A small text input" />
    <br />
    <Input placeholder="A bigger text input" size="2em" />
  </div>
);const Input = styled.input.attrs(props => ({  // we can define static props  type: "text",
  // or we can define dynamic ones  size: props.size || "1em",}))`  color: palevioletred;  font-size: 1em;  border: 2px solid palevioletred;  border-radius: 3px;
  /* here we use the dynamically computed prop */  margin: ${props => props.size};  padding: ${props => props.size};`;
render(  <div>    <Input placeholder="A small text input" />    <br />    <Input placeholder="A bigger text input" size="2em" />  </div>);
/**
 * 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;
  }
}