using styled components' createGlobalStyle as a workaround an issue i've had in my project, whereby I only want the background-color of .application to be white when the following component is rendered. The below implementation gives the perfect outcome however I get a warning in the console saying:
"The component sc-global-hEInDv has been created dynamically.
You may see this warning because you've called styled inside another component.
To resolve this only create new StyledComponents outside of any render method and function component."
Here is the code:
const GlobalStyle = createGlobalStyle`
.application {
background-color: white;
}
`;
return (
<div className={classNames("caseview", className)}>
<GlobalStyle />
<Helmet>
<title>{caseName}</title>
</Helmet>
{caseview.panelLinks.hasItems && (
<CaseViewDetailPanels caseview={caseview} />
)}
<Row>
<Column size={hasTaskGroup ? 9 : 12}>
{caseview.introtext && <FormattedText text={caseview.introtext} />}
</Column>
{hasTaskGroup && (
<Column
as={TaskGroupPanels}
size={3}
taskGroupPanels={caseview.taskGroupCollection}
/>
)}
</Row>
<FormRoute model={caseview} />
</div>
);
Can anyone suggest a workaround to suppress this warning?
You are creating the styled-component inside your functional component. If you move it outside the component, this warning will go away.
Move the below styled component, outside.
const GlobalStyle = createGlobalStyle`
.application {
background-color: white;
}
`;
Related
I have a NextJS App, and inside my page, there are two components.
export default function Home({ user }) {
return (
<>
<Component1 />
<Component2 />
</>
)}
I want to trigger a scroll from Component1 to Component2 by a click on the Component1.
I tried using id on the target, and an anchor on the trigger, it won't work since it's not the same component.
What do you think I am missing?
Here I want to add class to the input element directly.
add class with this MuiInputBase-input.
this is code for date picker
import { DateTimePicker, MuiPickersUtilsProvider } from "#material-ui/pickers";
render() {
return (<MuiPickersUtilsProvider utils={MomentUtils}>
<DateTimePicker value={this.state.selectedDateTime} onChange={this.OnChangeHandler} className="mh-Dateinput" />
</MuiPickersUtilsProvider>)
}
You can make use of inputProps inside renderInput.
Please note that params is being used here to apply MUIs parameters to the input field such as value so it behaves as expected.
<DateTimePicker
...
renderInput={(params) => (
<TextField
{...params}
inputProps={{ className: "custom-class" }}
/>
)}
/>
I have two components one is board component other is square component
when I am passing the props from box to square something strange is happening
Code for Board component is
import React from "react";
import Square from "./Square";
const Board = () => {
return (
<div className="board">
<div className="board-row">
<Square value={1}>
<p>hello</p>
</Square>
<Square value={2} />
<Square value={3} />
</div>
<div className="board-row">
<Square value={4} />
<Square value={5} />
<Square value={6} />
</div>
<div className="board-row">
<Square value={7} />
<Square value={8} />
<Square value={9} />
</div>
</div>
);
};
export default Board;
Code for Square component is
import React from "react";
function Square({ value, children }) {
// the curly braces are just destructring
//the values from props passed
console.log(children);
return (
<button type="button" className="square">
{children}
</button>
);
}
export default Square;
The question is console.log(children) is printing an object on my console whereas {console} is showing normal text on button
why is this happening ??
The thing to remember about JSX is that it is much closer to JavaScript than HTML, despite looking more like the latter. The React Docs include a section which shows how simple tags are equivalent to React.createElement calls, which produce objects describing how to render HTML.
props.children is an object which describes createElement calls happening further up the component tree. This allows it to be passed to further utilities like React.Children or React.cloneElement before finally being passed to the renderer. What you see in the console and what you see in the browser are its states before and after it has finally been rendered.
I assume that you mean that console.log(children) produces something similar to this. And you're not sure why {children} in the return value would produce 'normal' text in your browser window.
The reason for this is that children in the Square component is a Javascript object created by React. Your console doesn't know how to display this any better than showing a textual representation of the properties (as you see in the image).
But when you return {children} in your component function, it is handled by React when rendered to your browser window. React does, in fact, know how to display it 'correctly', hence the button with the text as expected.
The DOM-tree rendered was
<Grid fluid ={true}>
<Row>
<NavigationBar
buttonClass='nav-button'
className='nav-bar'
/>
</Row>
<section id={sectionList[0]}>
<Row className='logo-row'>
<Col className='logo-wrap' xs={3} sm={3} md={2}>
{Logo}
</Col>
<Col xs={9} sm={9} md={10}>
{ProgrammerName}
</Col>
</Row>
{backgroundImg}
</section>
</Grid>
And I was trying to check the clientHeight of the <section> by using following method:
const height = document.getElementById(sectionList[0]).clientHeight;
However, it seems that this call would only give out the height of the <Row> contained in the <section>, ignoring the {backgroundImg} expression, which itself called to render another <Row> component.
<Row>
<FullRowImage src={this.props.src} alt={this.props.alt} />
<h2>
<span>
Some Text
</span>
</h2>
</Row>
What might be the cause of this issue, that clientHeight counts only part of the <section> while leaving out the other?
Thanks.
So I finally figured this out.
As <FullRowImage /> renders an <img> itself, the clientHeight is called before the <img> is loaded and this would leads to a zero height of <img> as well as <FullRowImage>.
In this case, method componentDidMount() would not be enough since a mounted component does not guarantee a loaded image.
On the other hand, onLoad event will come in handy:
class FullRowImage extends React.Component {
constructor(props){
super(props);
this.state = {
loaded: false,
};
this.handleLoaded = this.handleLoaded.bind(this);
}
handleLoaded(){
console.log(document.getElementById('test').offsetHeight);
this.setState(
{loaded: true,}
);
}
render(){
return(
<img id='test'
onLoad={this.handleLoaded}
src={this.props.src}
alt= {this.props.alt} />
);
}
}
And this will print the height of <img> after it is loaded.
Thanks to this article Detect when images have finished loading with React
I am using Paper-Button but I am facing issue that the button text always gets capitalized instead or normal case.
I do not see any CSS or Javascript property being applied to make it upper case.
How should I resolve this problem?
I had the same issue and I solved the problem via adjusting the default theme. Add the following code to a file (name of your choice).js
import { createMuiTheme } from '#material-ui/core/styles';
const theme = createMuiTheme({
typography: {
button: {
textTransform: 'none'
}
}
});
export default theme;
You can then add the file to your app in index.js. I named it theme.js:
...
import theme from './theme';
...
const app = () => (
<ThemeProvider theme={theme}>
<CssBaseline />
<App />
</ThemeProvider>
);
ReactDOM.render(app, document.getElementById('root'));
As was mentioned in the comments above, the material design spec for buttons specifies that the text should be uppercase, but you can easily override its CSS property:
paper-button {
text-transform: none;
}
Inspired by the the CSS style above here is the inline styling for localized Button text transformation -
import {Button} from '#material-ui/core';
// Begin Component Logic
<Button style={{textTransform: 'none'}}>
Hello World
</Button>
// End Component Logic
If you use Mui 5 then you can use the sx syntax
<Button sx={{textTransform: "none"}}/>