xxxxxxxxxx
mport styled from "styled-components"
const Div = styled.div`
padding: 10px;
color: palevioletred;
`
const InheritedDiv = styled(Div)`
border: 1px solid palevioletred;
`
xxxxxxxxxx
import styled, { css } from ‘styled-components’;
const baseInputStyles = css`
padding: 0.5em;
`;
const StyledA = styled.a`
${baseInputStyles}
`;
const StyledButton = styled.button`
${baseInputStyles}
/* make changes as needed*/
`;
xxxxxxxxxx
import Document, { Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';
export default class MyDocument extends Document {
static getInitialProps({ renderPage }) {
const sheet = new ServerStyleSheet();
function handleCollectStyles(App) {
return props => {
return sheet.collectStyles(<App {props} />);
};
}
const page = renderPage(App => handleCollectStyles(App));
const styleTags = sheet.getStyleElement();
return { page, styleTags };
}
render() {
return (
<html>
<Head>{this.props.styleTags}</Head>
<body>
<Main />
<NextScript />
</body>
</html>
);
}
}
xxxxxxxxxx
// add props to the container :fluid
// inside the countainer query
${props=> props.fluid && css`
padding:10px;
marigin
-----
`}
xxxxxxxxxx
// 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;
}
}
xxxxxxxxxx
// 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);
`
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' };
`
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