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

conditional styled components with media query

Add Answer

Lucas Juan answered on August 7, 2020 Popularity 10/10 Helpfulness 3/10

answer conditional styled components with media query

related define a media query in styled components

related media query with styled-components

related media queries in styled components

conditional styled components with media query

Comment

import styled, { css } from 'styled-components'

const YourComponent = styled.div`
  //...
  
  ${props => props.isFirstPage && css`
     @media only screen and (max-width: 480px) {
       padding: 8px 8px 24px 8px
     }
  `}
`;

Popularity 10/10 Helpfulness 3/10 Language typescript

Source: stackoverflow.com

Tags: conditional media styled-components typescript

Link to this answer
Share Copy Link

Contributed on Apr 07 2021

Lucas Juan

0 Answers Avg Quality 2/10

Closely Related Answers

define a media query in styled components

Comment

const CardWrapper = styled.div`
  display: flex;
  flex-direction: row;
  @media (max-width: 768px) {
    flex-direction: column;
  }
`;

Popularity 10/10 Helpfulness 10/10 Language javascript

Source: jsramblings.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Aug 07 2020

Tanishq Vyas

0 Answers Avg Quality 2/10

media query with styled-components

Comment

// You first need to install 'styled-components' from your package manager

import { useState } from 'react'
import styled from 'styled-components'

const DivContainer = styled.div`
    border-radius: .5rem;
    padding-block: .5rem;
    box-shadow: 1px 1px 5px rgba(25, 25, 25, .65);
    
    // Media query
      @media (min-width: 768px) {
        width: auto;
      }
`

const InputControl = styled.input`
	width: 80%;
    padding: .5rem;
    border-radius: .5rem;
    margin-inline: auto;
    background-color: ${({inputLength}) => inputLength < 1 
                                          ? 'maroon': 'transparent' };
    border: ${({inputLength}) => inputLength < 1 
                                		  ? '1px solid red': 'none' };
    color: ${({inputLength}) => inputLength < 1 ? 'white': 'black' };
    
    // Media query
      @media (min-width: 768px) {
        width: 100%;
      }
`

const userName = () => setUserName(userName)

const Card = () => (
  const [ userName, setUserName] = ('');

  // Instead of regular <div></div> Tag
  // You wrap your elements around your 'custom styled component'
  <DivContainer>
  	<InputControl inputLength={userName.length} 
		value={userName} 
		onChange{handleUserName} 
		placeholder="Enter your name" />
  </DivContainer>
)

// With love @kouqhar

Popularity 9/10 Helpfulness 3/10 Language javascript

Source: www.linkedin.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jul 20 2022

kouqhar

0 Answers Avg Quality 2/10

media queries in styled components

Comment

const size = {
  mobileS: '320px',
  mobileM: '375px',
  mobileL: '425px',
  tablet: '768px',
  laptop: '1024px',
  laptopL: '1440px',
  desktop: '2560px'
}

Popularity 10/10 Helpfulness 2/10 Language whatever

Source: jsramblings.com

Tags: media-queries me

Link to this answer
Share Copy Link

Contributed on Dec 07 2020

Gleaming Grouse

0 Answers Avg Quality 2/10

media queries in styled components

Comment

export const device = {
  mobileS: `(min-width: ${size.mobileS})`,
  mobileM: `(min-width: ${size.mobileM})`,
  mobileL: `(min-width: ${size.mobileL})`,
  tablet: `(min-width: ${size.tablet})`,
  laptop: `(min-width: ${size.laptop})`,
  laptopL: `(min-width: ${size.laptopL})`,
  desktop: `(min-width: ${size.desktop})`,
  desktopL: `(min-width: ${size.desktop})`
};

Popularity 10/10 Helpfulness 2/10 Language whatever

Source: jsramblings.com

Tags: media-queries me

Link to this answer
Share Copy Link

Contributed on Dec 07 2020

Gleaming Grouse

0 Answers Avg Quality 2/10

conditional styled components with media query

Contents

More Related Answers

conditional styled components with media query

Closely Related Answers

define a media query in styled components

media query with styled-components

media queries in styled components

media queries in styled components

Grepper

Documentation

Social

Legal

Contact

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