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

media query with styled-components

Add Answer

kouqhar answered on August 7, 2020 Popularity 9/10 Helpfulness 3/10

answer media query with styled-components

related define a media query in styled components

related conditional styled components with media query

related media queries in styled components

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 media styled-components

Link to this answer
Share Copy Link

Contributed on Jul 20 2022

kouqhar

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

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 cond

Link to this answer
Share Copy Link

Contributed on Apr 07 2021

Lucas Juan

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

media query with styled-components

Contents

More Related Answers

media query with styled-components

Closely Related Answers

define a media query in styled components

conditional styled components with media query

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.