I'm using create react app and I need to assign props values to a styles of the component. In this case background image 'url' is need to pass as props to styles.
index.js
import React from "react";
import ReactDOM from "react-dom";
import Background from "./background";
import "./styles.css";
function App() {
return (
<div className="App">
<Background source="./assets/image.jpg" />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
background.js
import React from "react";
const styles = {
backgroundImage: "url()"
};
export default class Background extends React.Component {
render() {
return <div style={styles.background} />;
}
}
Find the code on below link:
codcodesandbox example
you can create style object and update the component style prop with it like so:
render() {
const style = {
backgroundImage:`url(${this.props.image})`
}
return <div style={style} />;
}
check this code update
Related
The point is to implement a dynamic SSR component can be re-rendered by a search input.
I solved this by creating a layout.tsx file on my specific router then import children which made me dynamic render ssr component by the client component:
Layout.tsx
import React, { Suspense } from "react";
import Search from "./Search";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<div className="layout">
<Search />
{children}
</div>
);
}
Search.tsx
"use client";
import { FormEvent, useState } from "react";
import { useRouter } from "next/navigation";
export default function Search() {
const [text, setText] = useState<string>("")
const router: any = useRouter();
const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
setText('')
router.push(`/definition/${text}`)
}
return (
<form onSubmit={handleSubmit} className='search'>
<input onChange={(e) => setText(e.target.value)}
value={text} type="text"
placeholder={"write to search"} />
</form>
);
} );
}
I found these documents (_document.js, _app.js) but it is not so clear to me how it should be defined.
This is the layout.js file I started building, Is there something missing, or something that needs fixing?
Thanks.
app/layout.js
import React from 'react'
import PropTypes from 'prop-types'
import { ThemeProvider } from '#mui/material/styles'
import CssBaseline from '#mui/material/CssBaseline'
import { CacheProvider } from '#emotion/react'
import theme, { roboto } from '../utility/theme'
import Head from './Head'
import createEmotionCache from '../utility/createEmotionCache'
const clientSideEmotionCache = createEmotionCache()
export default function RootLayout({ children }, props) {
const { Component, cache = clientSideEmotionCache, pageProps } = props
return (
<html className={roboto.className}>
<CacheProvider value={cache}>
<Head />
<body>
<ThemeProvider theme={theme}>
<CssBaseline />
<Component {...pageProps}>{children}</Component>
</ThemeProvider>
</body>
</CacheProvider>
</html>
)
}
RootLayout.propTypes = {
Component: PropTypes.elementType.isRequired,
emotionCache: PropTypes.object,
pageProps: PropTypes.object.isRequired,
}
I am using Next.js with Material-UI as the framework.
I have Layout component that wraps the contents with Material-UI <Container>.
I would like to override the style of Layout that limits the width of background, so that the background would extend to the full screen.
components/Layout.js
import { Container } from '#material-ui/core';
export default function Layout({ children }) {
return <Container>{children}</Container>;
}
pages/_app.js
import Layout from '../components/Layout';
...
<Layout>
<Component {...pageProps} />
</Layout>
...
pages/index.js
export default function App() {
return (
<div style={{ backgroundColor: "yellow" }}>
Home Page
</div>
)
}
Using Layout component comes in handy in most cases but sometimes I do want to override the certain styles of Layout from the child component.
In this case, how do I override the style of Layout component that puts the limit on maxWidth?
I tried to add {width: '100vw'} inside the style of pages/index.js, but did not work.
Any help would be appreciated.
Link to the SandBox
Using React Context is how I've solved this issue.
context/ContainerContext.js
import React from 'react';
const ContainerContext = React.createContext();
export default ContainerContext;
components/Layout.js
import React, { useState } from 'react';
import { Container } from '#material-ui/core';
import ContainerContext from '../context/ContainerContext';
export default function Layout({ children }) {
const [hasContainer, setHasContainer] = useState(true);
const Wrapper = hasContainer ? Container : React.Fragment;
return (
<ContainerContext.Provider value={{ hasContainer, setHasContainer }}>
<Wrapper>{children}</Wrapper>
</ContainerContext.Provider>
);
}
pages/index.js
import { useContext, useLayoutEffect } from 'react';
import ContainerContext from '../context/ContainerContext';
export default function App() {
const { setHasContainer } = useContext(ContainerContext);
// Where the magic happens!
useLayoutEffect(() => {
setHasContainer(false);
}, []);
return (
<div style={{ backgroundColor: "yellow" }}>
Home Page
</div>
);
}
I cannot see any change when applying "ThemeProvider" tag, even in a simple project as shown below.
There is no errors/warnings in the browser console (except for unused imports, but it fails even if I remove them all).
import React, { Component } from "react";
import Grid from "#material-ui/core/Grid";
import CssBaseline from "#material-ui/core/CssBaseline";
import MainBar from "./modules/MainBar";
import MainTemplate from "./style/MainTemplate";
import Palette from "./palette";
import { Button } from "#material-ui/core";
import { createMuiTheme } from "#material-ui/core/styles";
import { ThemeProvider } from "#material-ui/styles";
import purple from '#material-ui/core/colors/purple';
const theme = createMuiTheme({
typography: {
useNextVariants: true
},
palette: {
primary: purple,
secondary: {
main: "#f44336"
}
}
});
class App extends Component {
render() {
return (
<div className="App">
<ThemeProvider theme={theme}>
<Button color="primary">BUTTON</Button>
</ThemeProvider>
</div>
);
}
}
export default App;
Any idea about it? Its almost like documentation example, and it doesn't work.
Thank you.
Import MuiThemeProvider like,
import { MuiThemeProvider } from '#material-ui/core/styles';
And replace your code,
<ThemeProvider theme={theme}>
<Button color="primary">BUTTON</Button>
</ThemeProvider>
with this,
<MuiThemeProvider theme={theme}>
<Button color="primary">BUTTON</Button>
</MuiThemeProvider>
Ref
I am using react-tooltip, react-emotion.
I cannot figure out how to style the span in order to override default styles.
Here's what I've got so far:
import React, { PureComponent } from 'react';
import styled from 'react-emotion';
const myTooltip = (Wrapper, toolTip) => {
class TooltipWrap extends PureComponent {
render() {
return (
<span
data-tip={toolTip}
data-delay-show="250"
data-place="bottom"
className={TooltipStyle}
>
<Wrapper
{...this.props}
/>
</span>
);
}
}
return TooltipWrap;
};
export default withToolTip;
const TooltipStyle = styled.span ({
color: 'red !important';
fontSize: '48px !important';
})
Anyone have any tips or a specific definitive guide on how to style this span so I can override the defaults in react-tooltip?
The documentation is pretty spotty, and there's literally no examples anywhere on the web.
I ran into a similar issue but was able to override the default styles using styled components and passing it the ReactTooltip component
import React, { PureComponent } from 'react';
import styled from 'react-emotion';
import ReactTooltip from 'react-tooltip';
const myTooltip = (Wrapper, toolTip) => {
class TooltipWrap extends PureComponent {
render() {
return (
<span
data-tip={toolTip}
data-delay-show="250"
data-place="bottom"
>
// Replace ReactTooltip component with styled one
<ReactTooltipStyled type="dark" />
<Wrapper
{...this.props}
/>
</span>
);
}
}
return TooltipWrap;
};
export default withToolTip;
export const ReactTooltipStyled = styled(ReactTooltip)`
&.place-bottom {
color: red;
font-size: 48px;
}
`;
Using this method all you would need to do is import the newly styled component into your React file and replace the original ReactTooltip with the ReactTooltipStyled component.