Breaking News: Grepper is joining You.com. Read the official announcement!

styled-components example style object

Add Answer

Grieving Gharial answered on June 30, 2021 Popularity 10/10 Helpfulness 1/10

answer styled-components example style object

related style inheritance styled components

styled-components example style object

Comment

-1

// Static object
const Box = styled.div({
  background: 'palevioletred',
  height: '50px',
  width: '50px'
});

// Adapting based on props
const PropsBox = styled.div(props => ({
  background: props.background,
  height: '50px',
  width: '50px'
}));

render(
  <div>
    <Box />
    <PropsBox background="blue" />
  </div>
);// Static objectconst Box = styled.div({  background: 'palevioletred',  height: '50px',  width: '50px'});
// Adapting based on propsconst PropsBox = styled.div(props => ({  background: props.background,  height: '50px',  width: '50px'}));
render(  <div>    <Box />    <PropsBox background="blue" />  </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;
  }
}

Popularity 10/10 Helpfulness 1/10 Language whatever

Source: styled-components.com

Tags: object styled-components whatever

Link to this answer
Share Copy Link

Contributed on Jun 30 2021

Grieving Gharial

0 Answers Avg Quality 2/10

Closely Related Answers

style inheritance styled components

Comment

mport styled from "styled-components"

const Div = styled.div`
    padding: 10px;
    color: palevioletred;
`
const InheritedDiv = styled(Div)`
    border: 1px solid palevioletred;
`

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: inheritance inhe

Link to this answer
Share Copy Link

Contributed on Aug 27 2022

Marwen Labidi

0 Answers Avg Quality 2/10

styled-components example style object

Contents

More Related Answers

styled-components example style object

Closely Related Answers

style inheritance styled components

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.