Questions tagged [emotion]
Emotion stands out as an exceptional and versatile CSS-in-JS framework. Its innovative features draw inspiration from esteemed libraries such as glam, glamor, styled-components, and glamorous.
Utilizing Material UI for a Select menu along with Emotion for custom styling. I am facing a challenge where I need to customize the root classes (MuiPaper-root or MuiMenu-paper) of the menu popover once a menu item inside the Select menu is clicked. Inc ...
I am currently in the process of adapting to the transition from MUI v4 to v5 and migrating my styles. While most of it is going smoothly by following the documentation, I have encountered an issue: The component below renders perfectly as expected, but it ...
Recently, I upgraded my react app from Material UI 4 to 5 Beta. After consulting the documentation on the docs style library, I learned that the new version allows the use of emotion. However, when I attempted to implement it, I encountered an issue with t ...
Looking for a way to customize the appearance of tab indicators using Emotion styled components. I'm struggling to target nested classes in my code. Here's what I have so far: const StyledTabs = styled(Tabs)( { classes: { indicator: ...
After upgrading from Mui 4 to 5, I am facing a challenge in using class names effectively. While the SX property allows me to apply styles to individual components, I am struggling with applying the same class to multiple components. In version 4, my code ...
Trying to implement sx prop-based styling in a React project. Looking to utilize the theme using a theme getter. While styles render correctly in the browser, TypeScript raises errors and understanding the type ancestry is proving challenging. Working e ...
I recently changed how I was importing Fontawesome icons: src/App.css @import "@fortawesome/fontawesome-free/css/all.css";` After shifting the @import to CSS-in-Js using emotion: src/App.js // JS: const imports = css` @import "@fortawes ...
Currently tackling a console warning related to MUI5/emotion (I believe) I have noticed that the pseudo class ":first-child" might pose potential risks during server-side rendering. It may be worth considering replacing it with ":first-of-type". I wonder ...
I'm on a mission to set up a Typescript project with Material-UI v4.11.4 and implement emotion for styling in anticipation of the MUI v5 release. The aim is to integrate emotion into the project so developers can transition to using the new styling instead ...
I am currently using the most up-to-date installation of Material-UI on a React-Gatsby application. I recently integrated a third-party carousel package (react-material-ui-carousel) into my project. However, I have noticed that this carousel package is ca ...
When building a component with a Link, I am struggling to properly define the type for the href prop. import React from "react; import Link, { LinkProps } from "next/link"; type MyComponentProps = { href: Pick<LinkProps, "href&quo ...
I encountered an issue when styling a component imported from the Material-UI library using the styled API (@emotion/styled). Error:(19, 5) TS2589: Type instantiation is excessively deep and possibly infinite. Despite attempting to downgrade to typescript ...
I am currently working on a project using Nextjs and Material UI. The project runs smoothly in development mode, but encounters styling issues when built for production. Specifically, upon navigating to a second page, certain components like Dialog load wi ...
Can material-ui tooltips be customized using the styled function from @emotion/styled? import { Tooltip } from '@material-ui/core'; import styled from '@emotion/styled'; const MyTooltip = styled(Tooltip)` // customize the tooltip label ` I attempted ...
I am currently working with Antd and emotion within a Next.js project. I want to access the Antd theme variables (which are written in Less) from within a component. Here is an example of what I would like to achieve: const StyledButton = styled(Button)` ...
I am currently working on making the MUI component Breadcrumbs responsive. The issue I am facing is that when the Breadcrumbs component fills up all available space, the items shrink and use ellipsis like a Typography component with the noWrap property se ...
Recently, I created a Next.js v13 typescript app using npx create-next-app. After removing all the default css and html, I started incorporating Material UI into my project. However, when I added the CssBaseline, it resulted in numerous errors related to m ...
Currently, I am in the process of transitioning from Webpack to Vite for my React Typescript application. I have been attempting to integrate Emotion js into the project. "@vitejs/plugin-react": "^4.0.1", "vite": "^4.3.9 ...
Before in Material-UI v4, I had the following code snippet const { customPadding } = props; const classes = useStyles({ padding: customPadding, } as any); To apply props to a element's classes. However, in v5, instead of JSS, emotion is used, an ...
Hello, I am currently delving into Material UI (ver.5.10.10) for the first time. My goal is to customize the styling of the TextField component in Material UI. Specifically, I want the TextField to always display its focused style, regardless of whether it ...
I've made the decision to transition from using makeStyles to utilizing styled in Material-UI v5 for styling, as it's considered the "preferred" method. While makeStyles is still functional, I want to embrace the newer styling solution. In my navigation l ...
When I'm coding with React Native, I use the styled properties that follow most of CSS syntax and are formatted in camel case. For instance: //... <Component style={styles.container} /> //... const styles = StyleSheet.Create({ ...
In my next.js app, I'm facing an issue with changing the color of the label in a Material UI input field using Mui. Despite updating the theme.ts file to change the border bottom color and label color, only the border bottom color is being applied. The Mu ...
Issue Description: I encountered an issue while working with typescript and emotion/styled libraries. When attempting to specify the type of the parent component that wraps a styled component, I faced difficulties. The scenario involves a parent componen ...
I am encountering an issue while attempting to customize an MUI component using the styled library. Whenever I type a character in the text field, it loses focus. Strangely enough, everything works smoothly when I use inline sx based styling. It appears th ...
I need help with my codesandbox project, which you can find here: https://codesandbox.io/s/agitated-boyd-9z2r9?file=/pages/index.tsx The issue I'm facing involves a component selector. When I use styled from @mui/material, I encounter the error message Er ...
When using the css function imported from '@emotion/react', you may encounter different results depending on how it is implemented. Take a look at the following examples: const Button = styled('button')` ${css`background-color: blue`} ` In this case, th ...
https://i.stack.imgur.com/zHLON.png I've been using @emotion/react for theming and successfully injected the theme into it. I can access the theme using useTheme within components, but I'm facing some difficulties in accessing the theme within styles usin ...
While reading through the Mui's Server-side Rendering DOCS, I came across an interesting point. It mentioned that to avoid FOUC (Flash of Unstyled Content), we need to inject styles into the rendered HTML on the server side, which made complete sense. How ...
CustomEmotions.d.ts import '@emotion/react'; declare module '@emotion/react' { export interface Theme { colors: { primaryColor: string; accentColor: string; }; } } MainApp.tsx import { ...
As per the Storybook documentation, you can find more information at: // List.stories.ts | List.stories.tsx import React from 'react'; import { List, ListProps } from './List'; // ...
One day, I decided to tweak MUI's styled function a bit, so I came up with this proxy code: import * as muiSystem from '@mui/system'; type CreateMUIStyled = typeof muiSystem.styled; type MUIStyledParams = Parameters<CreateMUIStyled>; ... const sys ...
Encountering challenges while attempting to merge NextJS and @emotion. In a newly created NextJS application with basic @emotion replacements, running yarn build; yarn start produces a functional but uninspiring app, although the styles are displaying cor ...
In MUI version 5, how can one pass CSS classes to components using the className prop and also incorporate theme in those classes? I attempted to achieve this using styled-components in MUI v5, however it seems that while we can target specific classes u ...
Working on building a website using esbuild, react, and emotion/MUI has been smooth sailing so far. However, I've hit a roadblock with getting the styled component from @emotion/styled to function properly. uncaught TypeError: import_styled11.default ...
I recently made the switch from overwriting styles in my styles.css file with !important to using emotion css prop for implementing a dark theme in my web app. Below is the code snippet from App.tsx where I define my theme and utilize ThemeProvider: const ...
Looking to apply a margin-right to my button. Currently utilizing mui 5 with Button variant='contained'. I created a custom CSS style using the styled component in mui and targeted the Box. const Wrapper = styled(Box)({ display: 'flex', margin: '0, ...
As a CTO, I am faced with the decision of choosing between three popular CSS-in-JS libraries: jss emotion styled-component. I will keep this question focused and avoid straying into subjective territory. If necessary, I will answer it myself by asking sp ...
This particular query seems to have been posed and resolved in various ways, but the solutions I've come across either do not pertain to Emotion or the responses related to Emotion haven't yielded results for me. I am currently using @emtion/[ema ...
I have been working on setting up my styling using @emotion since makestyles were removed in React 18. Despite making changes as per my research, I am not seeing any updates reflected on my page. The expected result looks like this: https://i.stack.imgur. ...
Hey there, hope everyone is having a great day! I have a question about utilizing mui 5 styled-components that are powered by emotion. I am curious if there is a recommended approach, perhaps a standard practice, for extracting the styles from my compone ...
Encountering an issue with the npm package dependencies after publishing, specifically with @emotion/react. This problem arose while using vite for packaging. Upon installing the package in another project, the css property appears as css="[object Ob ...
I am working on a codebase that is structured like a single spa micro frontend in React. It utilizes MUI5 and Emotion/React for layouts and designs. Each micro frontend has its own package.json file, with Emotion/React installed separately in each one. The ...
Greetings, I have a couple of queries regarding Next.js, testing-library/react, and emotion. Before diving into the questions, let me share some code below: // Component import { css, Theme } from '@emotion/react'; function Foo() { return < ...
While working with React, I am facing a challenge of passing props from the instanced component into the mockFn function. The code example below is extracted and incorporates Material UI, but I am struggling on how to structure it in order to have access t ...
I'm currently experimenting with custom styling on a MaterialUI Typography component using the code snippet below: const StyledTitleTypography = styled(Typography)` color: 'black'; font-weight: 'bold'; `; <StyledTitleTypogr ...