We Keep Coding

Material UI v.4 Theme provider and StylesProvider. I can't use the "classes" prop of a component to override the styles

I'm trying to set advanced usage Material UI v.4 Theme provider and StylesProvider
I can't use the "classes" prop of a component to override the styles.
I follow that instruction and some experience from past projects.
Advanced Material UI v 4.12.3
My App.js:
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { ThemeProvider, StylesProvider } from "#material-ui/core/styles";
import theme from "./styles/theme";
import store from "./redux/store";
import AppRouter from "./routes/AppRouter";
import ErrorBoundary from "./ErrorBoundary";
ReactDOM.render(
<Provider store={store}>
<ErrorBoundary>
<StylesProvider injectFirst>
<ThemeProvider theme={theme}>
<AppRouter />
</ThemeProvider>
</StylesProvider>
</ErrorBoundary>
</Provider>,
document.getElementById("root"),
);
part of package.json:
"dependencies": {
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.56",
}
"devDependencies": {
"#material-ui/core": "^4.9.12",
"#material-ui/pickers": "^3.2.10",
}
theme.js
import { createTheme } from "#material-ui/core/styles";
const theme = createTheme({
palette: {
primary: {
main: "#08718f",
},
secondary: {
main: "#604486",
},
},
});
export default theme;
image-preview.scss
.previewButton {
border-radius: 10px;
border: 1px solid #dcdcdc;
margin-right: 7px;
margin-bottom: 7px;
opacity: 0.6;
&:hover {
border: 1px solid #3f51b5;
opacity: 1;
}
}
SomeComponent.js
import { Button } from "#material-ui/core";
import "../../styles/common/image-preview.scss";
{imageObj?.map((el, index) => (
<Button
className='previewButton'
key={el.id}
onClick={() => setSelectedImage(index)}
>
<img className='imageButton' src={el.url} alt={el.imgName} />
</Button>
))}
This code above works great. I can easily rewrite Material UI components with the flag "injectFirst" from App.js .
Inside Button, I can change the style className=`previewButton' it works
But if I made these changes.
I can't use the "classes" prop of a component to override the styles.
className={classes.previewButton}
SomeComponent.js
import { Button } from "#material-ui/core";
import classes "../../styles/globalStyle.module.scss";
{imageObj?.map((el, index) => (
<Button
className={classes.previewButton}
key={el.id}
onClick={() => setSelectedImage(index)}
>
<img className='imageButton' src={el.url} alt={el.imgName} />
</Button>
))}
globalStyle.module.scss
.previewButton {
border-radius: 10px;
border: 1px solid #dcdcdc;
margin-right: 7px;
margin-bottom: 7px;
opacity: 0.6;
&:hover {
border: 1px solid #3f51b5;
opacity: 1;
}
}
Maybe I missed something? Any help will help!

How to use Font Awesome Icons is background-image in React

Can someone show me how to use Font Awesome Icons in my SearchBar component below? My intention is to import a Font Awesome Icon an use it as a background0image for the search field
import React from "react"
import styled from 'styled-components'
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome"
import { faSearch } from "#fortawesome/free-solid-svg-icons"
const Input = styled.input`
width: 400px;
padding: 10px 10px 10px 50px;
border: none;
background-color: ${props => props.mode === true? "hsl(209, 23%, 22%)" : "hsl(0, 0%, 100%)"};
color: ${props => props.mode === true? "white": "hsl(207, 26%, 17%)"};
&:focus {
outline: none;
}
`
export default function SearchBar (props) {
return (
<Input
mode = {props.mode}
type = "text"
placeholder = "Search for a Country"
name = "search-query"
>
</Input>
)
}
Any help will be appreciated.
Regards.

How can I use className in component from styled-components in React?

NavStyles.js
import styled from 'styled-components';
export const Nav = styled.navwidth: 100%; ;
export const NavMenuMobile = styled.ul`
height: 80px;
.navbar_list_class {
font-size: 2rem;
background-color: red;
}
${props => props.navbar_list_props && `
font-size: 2rem;
background-color: gray;
`}
`;
Navbar.js
import React from 'react'
import {Nav, NavMenuMobile} from "./NavStyles";
const Navbar = () => {
return (
<Nav>
{/* work no problem */}
<NavMenuMobile navbar_list_props>Nav Bar props</NavMenuMobile>
{/* not work How to use..? */}
<NavMenuMobile className="navbar_list_class">Nav Bar class</NavMenuMobile>
</Nav>
)
}
export default Navbar

<Nav>
<NavMenuMobile className={navbar_list_props}>Nav Bar props</NavMenuMobile>
</Nav>
Try This

Looks like you are setting styles for the children within NavMenuMobile with the class "navbar_list_class".
Should work with &.navbar_list_class
export const NavMenuMobile = styled.ul`
height: 80px;
&.navbar_list_class {
font-size: 2rem;
background-color: red;
}
`;

Why I can't pass simple props in React..From parent to child

I am a beginner of React.
I'm practicing using React to pass props from parent to child.
but.I can't pass props.
I just want to pass simple props from parent to child.
My code is here.
https://codesandbox.io/s/props-test-3bgjy?file=/src/Child.js
My code is not showing the error.
But my code doesn't display correctly.
import React, { Component } from "react";
import styled from "styled-components";
import Child from "./Child";
const Button = styled.button`
font-size: 16px;
padding: 16px;
`;
class App extends Component {
constructor(props) {
super(props);
this.state = {
counter: 0,
msg: "state(msg)initial",
flg: true
};
this.doAction = this.doAction.bind(this);
}
doAction() {
this.setState((state) => ({
counter: state.counter + 1,
msg: state.counter,
flg: !state.flg
}));
}
render() {
return (
<div>
<Child msg={this.state.message} flag={this.state.flag} />
<Button onClick={this.doAction}>Click</Button>
</div>
);
}
}
export default App;
import React, { Component } from "react";
import styled from "styled-components";
const Message = styled.p`
font-size: 24pt;
color: #900;
margin: 20px 0px;
padding: 5px;
border-bottom: 2px solid #900;
&[data-primary="true"] {
font-size: 24pt;
color: white;
background-color: #900;
margin: 20px 0px;
padding: 5px;
border-bottom: 2px solid #900;
}
`;
class Child extends Component {
render() {
return (
<div>
<Message data-primary={this.props.flag}>
count: {this.props.msg}
</Message>
</div>
);
}
}
export default Child;

You are have mistake in line <Child msg={this.state.message} flag={this.state.flag} />
Need use state param msg
<Child msg={this.state.msg} flag={this.state.flag} />
https://codesandbox.io/s/props-test-forked-gw69r?file=/src/Parent.js

It looks like you have a typo; change this line:
<Child msg={this.state.message} flag={this.state.flag} />
to
<Child msg={this.state.msg} flag={this.state.flg} />

Add styles to Styled Component custom Component in React Native

I have button.js:
import React from "react";
import styled from "styled-components";
const StyledButton = styled.TouchableOpacity`
border: 1px solid #fff;
border-radius: 10px;
padding-horizontal: 10px;
padding-vertical: 5px;
`;
const StyledButtonText = styled.Text`
color: #fff;
font-size: 12;
`;
export default ({ children }) => (
<StyledButton>
<StyledButtonText>{children.toUpperCase()}</StyledButtonText>
</StyledButton>
);
And its usage:
import React, { Component } from "react";
import styled from "styled-components";
import Button from "./button";
const StyledNavView = styled.View`
justify-content: flex-end;
flex-direction: row;
background: #000;
padding-horizontal: 10px;
padding-vertical: 10px;
`;
const StyledTodayButton = styled(Button)`
margin: 10px;
`;
export default class Nav extends Component {
render() {
return (
<StyledNavView>
<StyledTodayButton>Today</StyledTodayButton>
<Button>Previous</Button>
</StyledNavView>
);
}
}
Problem is, the margin I apply in StyledTodayButton is actually never applied. Have I misunderstood extending styles in Styled Components?

There are 2 ways to make it work:
extend button style:
const StyledTodayButton = Button.extend'margin: 10px'
pass prop to button:
const Button = styled.button'
/* ...your props */
margin: ${props => props.withMargin ? '10px' : '0px'};
and then call in render method you can invoke it with:
<Button withMargin {...restProps} />