Product
Introducing Java Support in Socket
We're excited to announce that Socket now supports the Java programming language.
@emotion/styled
Advanced tools
The @emotion/styled npm package is a library for styling React components using tagged template literals. It allows developers to write CSS code in JavaScript and attach styles directly to components, providing a more seamless integration of styles within JS code. It leverages the power of Emotion, a performant and flexible CSS-in-JS library.
Creating styled components
This feature allows you to create a new React component with a set of styles attached to it using a template literal. The styles are scoped to the component, and pseudo-classes and media queries can be used within the template literal.
import styled from '@emotion/styled';
const Button = styled.button`
background-color: hotpink;
padding: 16px;
border-radius: 8px;
color: white;
font-size: 1em;
&:hover {
opacity: 0.9;
}
`;
<Button>Click me</Button>
Theming
This feature allows you to define a theme object and use it to style components. The ThemeProvider component makes the theme available to all styled components, which can access the theme via props.
import styled from '@emotion/styled';
import { ThemeProvider } from '@emotion/react';
const theme = {
colors: {
primary: 'hotpink'
}
};
const Button = styled.button`
background-color: ${props => props.theme.colors.primary};
/* other styles */
`;
<ThemeProvider theme={theme}>
<Button>Themed Button</Button>
</ThemeProvider>
Dynamic styling
This feature allows you to pass props to your styled components to dynamically change their styles based on the props received. This is useful for creating variations of a component, such as primary and secondary buttons.
import styled from '@emotion/styled';
const Button = styled.button`
color: ${props => props.primary ? 'hotpink' : 'black'};
/* other styles */
`;
<Button primary>Primary Button</Button>
<Button>Default Button</Button>
Styled-components is another popular CSS-in-JS library that provides similar functionality to @emotion/styled. It also uses tagged template literals to style components. The syntax and API are very similar, but styled-components has a slightly different focus on theming and a larger ecosystem.
Linaria is a zero-runtime CSS-in-JS library that extracts styles to CSS files at build time, rather than injecting styles at runtime like @emotion/styled. This can result in better performance and smaller bundle sizes, but with less dynamic capabilities.
Glamorous is a now-deprecated CSS-in-JS library that was similar to @emotion/styled. It allowed for styling components with JavaScript objects or template literals. Although it's no longer maintained, it was once a popular alternative.
The styled API for @emotion/react
yarn add @emotion/react @emotion/styled
import styled from '@emotion/styled'
let SomeComp = styled.div({
color: 'hotpink'
})
let AnotherComp = styled.div`
color: ${props => props.color};
`
render(
<SomeComp>
<AnotherComp color="green" />
</SomeComp>
)
More documentation is available at https://emotion.sh/docs/styled.
FAQs
styled API for emotion
The npm package @emotion/styled receives a total of 5,321,999 weekly downloads. As such, @emotion/styled popularity was classified as popular.
We found that @emotion/styled demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
We're excited to announce that Socket now supports the Java programming language.
Security News
Socket detected a malicious Python package impersonating a popular browser cookie library to steal passwords, screenshots, webcam images, and Discord tokens.
Security News
Deno 2.0 is now available with enhanced package management, full Node.js and npm compatibility, improved performance, and support for major JavaScript frameworks.