I have made a separate useStyle file and want to use this custom css in useStyle of material ui. How to achieve that?
input[type="checkbox"],
input[type="radio"] {
display: none;
}
Let's say your useStyles file looks something like this:
import makeStyles from "#material-ui/core/styles/makeStyles";
const useStyles = makeStyles({
hideCheckboxAndRadio: {
"& input[type='checkbox'], & input[type='radio']": {
display: "none"
}
}
});
export default useStyles;
Back on your components, just import this file and attach it to a parent where you want all of its children input of type radio & checkbox to be hidden
import useStyles from "./useStyles";
function App() {
const classes = useStyles();
return (
<div className={classes.hideCheckboxAndRadio}>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
</div>
);
}
Related
I am creating a div using styled component. I want to change the visibility of the div on button clicked,
const Category = () => {
const [showCategory, setShowCategory] = useState(false)
useEffect(() => {
setShowCategory(false)
}, [])
return (
<button onClick={() => { setShowCategory(true)}}>
New Category
</button>
<AdminInputStyle>
<form>
<form-group>
<label>Add Category</label>
<input type='text' />
</form-group>
<button>Submit</button>
</form>
</AdminInputStyle>
)
}
Here's the styled component
const AdminInputStyle = styled.div`
display: ${(d) => (d.showCategory ? 'show' : 'hidden')};
`
You can try something like this too, show when you need to show the add category when you press add category
return (
<>
<button
onClick={() => {
setShowCategory(true);
}}
>
New Category
</button>
{showCategory && (
<AdminInputStyle>
<form>
<form-group>
<label>Add Category</label>
<input type="text" />
</form-group>
<button>Submit</button>
</form>
</AdminInputStyle>
)}
</>
);
I have an example, but in the case we will use a Button. Clicking it will alter the visibility.
You must pass a property to the styled component if you want it to be visible based on that prop. In your example, you don't pass a prop to the styled component in this scenario, which is why the component cannot detect if it should be visible or not.
You will need to / can use the css function from the styled-components library. This can help you return styles based on the properties your styled-component will have. In this example, our property that we pass to the button will be called visible.
import React from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components/macro';
const StyledButton = styled.button`
border-radius: 3px;
color: white;
background-color: green;
cursor: pointer;
width: 100px;
height: 50px;
${({ visible }) => {
return css`
visibility: ${visible ? 'visible' : 'hidden'};
`;
}}
`;
export default function Button({ children, visible, onClick }) {
return (
<StyledButton visible={visible} onClick={onClick}>
{children}
</StyledButton>
);
}
Button.propTypes = {
children: PropTypes.node,
visible: PropTypes.bool,
onClick: PropTypes.func,
};
You can see that passing the visible prop will enable the button to alter its' styles based on whether that property is true or false. We utilize a function within the component that returns the css function and this will control the visibility css property.
Here is how we utilize the button and pass props to it from another component; in this example just the App.js file:
import React, { useState } from 'react';
import './App.css';
import Button from './components/Button';
function App() {
const [visible, setVisible] = useState(true);
function handleClick() {
setVisible(!visible);
}
return (
<div className="App">
<Button visible={visible} onClick={handleClick}>
Click
</Button>
</div>
);
}
export default App;
FYI: For the css; you don't want display: hidden;. hidden is an invalid value for the display prop. You'd want display: none; if you don't want the element to be in the DOM. visibility: hidden; will add the element to the DOM, but it won't be visible. You can use whichever works best for your case 👍🏿
I'm still a beginner with the ui-material. And I would like to custom my own Button Component with styled-component.
The problem is to override the css according to the button variations, for example if it is primary or secondary:
Here's my code into codesandbox.io
import React from "react";
import PropTypes from "prop-types";
import { CButton } from "./styles";
const CustomButton = ({ children, color }) => {
return (
<div>
<CButton variant="contained" color={color}>
{children}
</CButton>
</div>
);
};
CustomButton.propTypes = {
children: PropTypes.node,
color: PropTypes.oneOf(["primary", "secondary"])
};
export default CustomButton;
import styled, { css } from "styled-components";
import Button from "#material-ui/core/Button";
export const CButton = styled(Button)`
height: 80px;
${({ color }) =>
color === "primary"
? css`
background-color: green;
`
: color === "secondary" &&
css`
background-color: yellow;
`}
`;
import React from "react";
import CustomButton from "./CustomButton";
const App = () => {
return (
<div>
<div
style={{
marginBottom: "10px"
}}
>
<CustomButton color="primary">Primary</CustomButton>
</div>
<div>
<CustomButton color="secondary">Secondary</CustomButton>
</div>
</div>
);
};
export default App;
Could you tell me how I can get my styling to override the ui-material?
Thank you in advance.
It looks like there's a nice example on how to do this in the material-ui docs: https://material-ui.com/guides/interoperability/#styled-components
One thing you seem to be missing is the StylesProvider, which allows your styles to override the default material styles. This seems to work... I don't deal with the conditional in your example, but I don't think that's part of your problem here.
const MyStyledButton = styled(Button)`
background-color: red;
color: white;
`;
export default function App() {
return (
<StylesProvider injectFirst>
<div className="App">
<MyStyledButton color="primary">Foo</MyStyledButton>
</div>
</StylesProvider>
);
}
Here's a codesandbox: https://codesandbox.io/s/infallible-khorana-gnejy
I am trying to add class names to a React Component to make it easier for me to customize that component using Styled Components. Here is a simplified outline of the component:
const SignupForm = props => (
<form>
<Input className="input" />
<Button className="button" />
</form>
)
And here is how I would like to use it:
import { SignupForm } from '../path/to/signup-form'
<Form />
...
const Form = styled(SignupForm)`
.input {
/* Custom Styles */
}
.button {
/* Custom Styles */
}
`
However, this does not work. Only if I create a wrapper Component will it work - like this:
import { SignupForm } from '../path/to/signup-form'
<FormWrapper>
<SignupForm/>
<FormWrapper>
...
const FormWrapper = styled.div`
.input {
/* Custom Styles */
}
.button {
/* Custom Styles */
}
`
I'm wondering whether or not there is a way to access the .input and .button classes without having to create a wrapper class, i.e. via the actual imported class itself? If so, how?
You need to provide className for the wrapper/container as styled-component injecting the styles through it:
const SignupForm = ({ className }) => (
<form className={className}>
<input className="input" />
<button className="button">Button</button>
</form>
);
const Form = styled(SignupForm)`
.input {
background-color: palegreen;
}
.button {
background-color: palevioletred;
}
`;
Just add extra atrribute className by using attrs to existing styled component.
const FormWrapper = styled.div.attrs({
className: 'SignupForm',
})`
.input {
/* Custom Styles */
}
.button {
/* Custom Styles */
}
`
I want to upload and read a file locally, but I want to do that using a custom button not using HTML input.
<input type="file" id="my_file_input" />
I found this way but I don't want to use this shape or this button, I wanted to use a material UI Raised Button to do this functionality to match the other site Button.
I also tried the following way but it didn't work because as i clicked the button nothing happened.
<input type="file" id="my_file_input" style={{display:"none"}}/>
<label htmlFor="my_file_input">
<RaisedButton
label="Import from Excel"
labelColor="#FFFFFF"
backgroundColor="#01579b"
/>
</label>
I thought I should do the uploading/reading file functionality manually in the onClick function of the RaisedButton but I didn't find a way to do that.
So is there any other solution for this problem in react?
I hope this code will help you.
We can solve it in two ways.
1-)
HTML
<div>
<input type="file" hidden ref={this.inputReference} onChange={this.fileUploadInputChange} />
<button className="ui button" onClick={this.fileUploadAction}>
Image Upload
</button>
{this.state.fileUploadState}
</div>
REACT CONSTRUCTOR
constructor(props) {
super(props);
this.state={fileUploadState:""}
this.inputReference = React.createRef();
}
ONCLICK FUNCTION
fileUploadAction = () =>this.inputReference.current.click();
fileUploadInputChange = (e) =>this.setState({fileUploadState:e.target.value});
2-)
HTML
<div>
<input id="fileButton" type="file" hidden />
<button onClick={this.fileUploadButton}>
Image Upload
</button>
{this.state.fileUploadState}
</div>
React State
this.state = {fileUploadState:""}
React Function
fileUploadButton = () => {
document.getElementById('fileButton').click();
document.getElementById('fileButton').onchange = () =>{
this.setState({
fileUploadState:document.getElementById('fileButton').value
});
}
}
I wanted to provide an update for using refs with functional components. Here is a quick example:
Import React, {useRef} from 'React'
const myComponent = () => {
const fileInputRef=useRef();
const handleChange(event) = () =>{
// do something with event data
}
return(
<>
<button onClick={()=>fileInputRef.current.click()}>
Custom File Input Button
</button>
<input onChange={handleChange} multiple={false} ref={fileInputRef} type='file'hidden/>
</>
)
}
please read API of React Material https://material-ui.com/demos/buttons/
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/core/styles';
import Button from '#material-ui/core/Button';
const styles = theme => ({
button: {
margin: theme.spacing.unit,
},
input: {
display: 'none',
},
});
function ContainedButtons(props) {
const { classes } = props;
return (
<div>
<input
accept="image/*"
className={classes.input}
id="contained-button-file"
multiple
type="file"
/>
<label htmlFor="contained-button-file">
<Button variant="raised" component="span" className={classes.button}>
Upload
</Button>
</label>
</div>
);
}
ContainedButtons.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(ContainedButtons);
As the doc says, you just need to add:
component="span"
To the button component.
I got a redux form, which looks pretty bad. I want to style it somehow, but my project uses modular css loaders. It looks like:
import styled from 'styled-components';
const Input = styled.input`
color: #41addd;
&:hover {
color: #6cc0e5;
}
`;
export default Input ;
Then I have to import it into a component which where I want to use that Input element.
But redux-form uses a build in component called Field.
import { Field, reduxForm } from 'redux-form';
<Field
name="firstName"
component="input"
type="text"
placeholder="First Name"
/>
And if I would replace Field with my customly styled Input, the form doesn't work any longer.
How can I deal with it? How can I style the Field component?
Thank you.
The styled-components have special functional for that case. Your example will be like so:
import styled from 'styled-components';
import { Field, reduxForm } from 'redux-form';
const StyledField = styled(Field)`
color: #41addd;
&:hover {
color: #6cc0e5;
}
`;
<StyledField
name="firstName"
component="input"
type="text"
placeholder="First Name"
/>