I'm currently developing CMS with Gatsby and emotion.
Style is duplicately generated even same class is allocated.
I think there's multiple of solution(like using postCSS), but I'd like to grasp the cause of it.
import React from 'react';
import PropTypes from 'prop-types';
import tw from 'twin.macro';
import styled from '#emotion/styled';
const StyledComponent = styled.section``;
const Section = ({ component: Component, children, ...other }) => (
<StyledComponent css={tw`bg-white`} {...other}>
{children}
</StyledComponent>
);
Here's rendered result on browser(CSS Style is literally duplicated)
Above problem occurs only in production environment.
Related
With React (typescript) and MUI (5.4.2), I'm trying to put everything regarding styles within a single file, wrapping everything in my App.tsx.
Issue: The custom MUI theme does not apply to the rest of my app (fallback to default MUI theme)
The whole thing worked fine when the ThemeProvider component was placed directly within the App.tsx file, but broke as soon as I placed it elsewhere. I need to keep a separated component, for I'll add Elastic UI on top of MUI later on.
My App.tsx file:
function App() {
<UiProvider>
// ...whole app
</UiProvider>
}
The UiProvider component is a simple wrapper component as it follows:
import {ThemeProvider} from "#mui/styles";
import {CustomTheme} from "../../themes/CustomTheme";
import {createTheme, Theme} from "#mui/material/styles";
const UiProvider = (props: any) => {
return (
<ThemeProvider theme={CustomTheme}>
{props.children}
</ThemeProvider>
)
}
export default UiProvider
Because #mui/styles is the legacy styling solution for MUI, if this is for v5, perhaps the import for ThemeProvider should be:
import { ThemeProvider } from '#mui/material/styles';
The MUI 5 docs on Theming have a section on "Accessing the theme in a component". However, it's really just one sentence that links to the legacy style docs.
Here's the example they give in those legacy docs:
import { useTheme } from '#mui/styles';
function DeepChild() {
const theme = useTheme();
return <span>{`spacing ${theme.spacing}`}</span>;
}
Which is pretty much exactly what I want to do — I want to be able to access the theme color palette down in some deep functional component. However, my component complains
Module not found: Error: Can't resolve '#mui/styles' in...
Digging a little further, it seems they're rather strongly trying to discourage people from using this legacy Styles technique, and the MUI 5 way to do this is with "system design tokens", which I guess should Just Work. But, they're not.
I have my whole app wrapped in ThemeProvider:
import React from 'react';
import { CssBaseline } from '#mui/material';
import { ThemeProvider } from '#mui/material/styles';
import theme from './theme';
import Foo from './foo';
const App = () => {
return (
<Fragment>
<ThemeProvider theme={theme}>
<CssBaseline enableColorScheme />
<Foo />
</ThemeProvider>
</Fragment>
);
};
export default App;
And then in foo.js:
import React from 'react';
import { Box } from '#mui/material';
export const Foo = () => {
return (
<Box
sx={{
background: 'repeating-linear-gradient(-45deg, '
+ ' theme.palette.error.light, theme.palette.error.light 25px,'
+ ' theme.palette.error.dark 25px, theme.palette.error.dark 50px'
+ ')',
}}
>
<span>Test</span>
</Box>
);
};
I initially started with just error.light and error.dark. When that didn't work, I expanded it all to palette.error.light, etc..., and then ultimately to theme.palette.error.light, etc....
It seems no matter what I try, it's not accessing those theme variables, and is instead just passing through the text.
So, back to the question: how am I supposed to access MUI 5 theme variables in nested functional components?
Replace
import { useTheme } from '#mui/styles';
with
import { useTheme } from '#mui/material/styles';
#mui/styles is used for legacy, you can add it using yarn add or npm install, but first give a shot to what I mentioned above.
I'm using styled Component on a page of my app. Code is really straightforward:
// styled component
import styled from 'styled-components'
const StyledOrdersPage = styled.div`
background-color: red;
`
export default StyledOrdersPage
and here is the component:
import React, { Component } from 'react';
import StyledOrdersPage from './index.styled.js'
class OrdersPage extends Component {
render() {
return (
<StyledOrdersPage>
<p>Simple component</p>
</StyledOrdersPage>
);
}
}
export default OrdersPage;
Problem is, I have absolutely no styling on my page whatsoever.
Now, this page can be accessed by using the /order route of my app. If I navigate to homepage (/), and then to my order page, styling is applied. But if I reload the order page, all styling is gone.
Is this related to styled-components ? Or is this just some weird routing behavior ?
I'm trying to use styled components to personalize a header component from semantic-ui-react.
I try:
header.jsx:
import React from 'react';
import { Header } from 'semantic-ui-react';
import TipografiaHeader from './cabecalho.css'
const HeaderPages = () => (
<div>
<TipografiaHeader as='h2'
textAlign='center'
>
Workout Log
</TipografiaHeader>
</div>
)
export default HeaderPages
cabecalho.jss.js:
import styled from "styled-components";
import { Header } from 'semantic-ui-react';
const TipografiaHeader = styled.Header`
background: red;
`;
export { TipografiaHeader };
But in the console i'm receiving:
Uncaught TypeError: _styledComponents2.default.Header is not a
function
The syntax for styled.element can only be used for HTML elements. For eg:
styled.h1``
For styling a custom component, the syntax to be used is:
styled(Header)``
Note that this custom component requires the className prop to be passed into the DOM element underneath for this to work.
Docs
I am trying to understand a project and there I found an interesting way of applying styles to the component. I would like to know what are the advantages that one can get by using this type of styling.
**productRow.scss**
#price{
background-color:yellow;
}
productRow.js
import PropTypes from 'prop-types';
import React from 'react';
import {price} from '../styles/productRow.scss';//Here extracted price from the styles file
const ProductRow = ({data}) =>{
return(
<div>
<p >{data.name}-<span id={price}>{data.price}</span></p>
</div>
);};
ProductRow.propTypes = {
data: PropTypes.object,
ToggleDetails: PropTypes.bool
};
export default ProductRow;