Styled component - how to add a render prop to create masked input - javascript

I am trying to add masked input to a styled component based on react-native-paper Text Input. Here is my styled component :
const StyledTextInput = styled.TextInput`
border-color: #68c25a;
border-width: 1px;
border-radius: 5px;
height: 50px;
margin-top: 5px;
padding: 12px;
`;
I am trying to add it as a render prop as per docs:
<StyledTextInput
render={(props) => (
<MaskInput {...props} mask={Masks.DATE_DDMMYYYY} />
)}
/>
But this doesn't work. The only way it works is if I add it directly to TextInput, not StyledTextInput. So I think the issue is in the styled component itself.

Related

How can I customize the checked state of a checkbox when using svgr in React?

I'm working on a React project and I'm using styled-component and typescript.
I'm customizing the checkbox like this:
Source
import React, { ReactElement } from 'react';
import styled from 'styled-components';
import IconChecked from '#assets/Icons/ico_checked.svg';
interface Props {
id: string;
}
const StyledCheckBox = styled.input`
box-sizing: border-box;
width: 20px;
height: 20px;
background: #ffffff;
border: 1px solid #d4dae4;
border-radius: 4px;
appearance: none;
&:checked {
background-image: url(${IconChecked});
background-repeat: no-repeat;
background-color: #ffffff;
background-position: 50%;
}
`;
const CheckBox = ({ id }: Props): ReactElement => (
<StyledCheckBox type="checkbox" id={id} />
);
export default CheckBox;
Question
To use the svg icon without the <img> tag, I installed the svgr package and set it as an svg type loader through webpack.
The problem is that svgr has the logic to convert svg to component, so I can't set the checked icon in the following way.
&:checked {
background-image: url(${IconChecked});
...
}
As a result, the check icon(IconChecked) does not appear when I click the checkbox after using svgr. How can I solve this?
You can move your ico_checked.svg file to public folder and use the svg directly from the url like this:
&:checked {
background-image: url("/ico_checked.svg");
...
}
You can take a look at this sandbox for a live working example of this approach.

Unable to move the button position to down

I am new to CSS.I am trying to move the position of button down which is overlapping with another button. I tried putting the button in different div, still facing the same issue. Below is my code
<div className="App">
{!showEvents && (<div>
<button onClick= {() => setShowEvents(true)}>Show Events </button>
</div>)}
{showEvents && (<div>
<button onClick = {() => setShowEvents(false)}>Hide Events</button>
</div>)}
<Title title={title} />
{showEvents && < Eventlist events={events} handleClick = {handleClick} />}
{showModal && (
<Modal handleClose={handleClose}>
<h2>Terms and Conditions</h2>
<p>Agree the terms and Conditions</p>
</Modal>
)}
<div>
<button1 onClick={() => setShowModal(true)}> Show </button1>
</div>
</div>
);
}
// Export the App component to consume/ import the component in some other pages.
export default App;
CSS code for two buttons
button{
display: inline-block;
padding: 10px 20px;
background: #f1f6;
border-radius: 8px;
font-weight: normal;
height: 40px;
}
button1{
display: inline-block;
padding: 10px 20px;
background: #f1f6;
border-radius: 8px;
font-weight: normal;
height: 40px;
}
In the above code, I need to move button1 down from button. Can anyone help me to resolve this issue.
The button is likely taking up the full space of the container div. Instead trying applying a margin to the container rather than the button
ie.
.button-div {
margin: 10px 0;
}
The problem is that you are not applying a margin on the button. You are applying padding, which is spacing from the border of the button inside towards the content.
You need to apply margin to it and it will still work. Div is a block element so if you put margin it will just scale up to match the needed height.
Applying margin to the div is also correct though depending on what you are trying to accomplish.

Use className for Material-UI component

I want tp use css to Material-UI component.
in MyCss.css
.trackTitle {
color:white;
}
in myComponent.js
import "./MyCss.css"
<Grid container item xs={1} className="trackTitle">
change color test
</Grid>
It doesn't change the color.
However the below works.
import "./MyCss.css"
<Grid container item xs={1} className="trackTitle">
<span className="trackTitle">
change color test
</span>
</Grid>
If I use basic tag span not Material-ui Grid
The class works.
See another case for component Slider
in MyCss.css
.mySlider {
height:"80px";
}
in myComponent.js
<Slider className="mySlider"
min={0} max={1} step={0.1}/>
not work.
<Slider className="mySlider" style={{height:"80px"}}
min={0} max={1} step={0.1}/>
works.
Now I understood className for component doesn't work.
Howeber, I want to use css to Material-UI component, how can I make it?
What you can do is to find the material-UI components CSS selector in the browser console, then override the css in your css file. Most likely this would work. Here is an example this is the root css for the slider
.MuiSlider-root {
color: #1976d2;
width: 100%;
cursor: pointer;
height: 2px;
display: inline-block;
padding: 13px 0;
/* position: relative; */
box-sizing: content-box;
touch-action: none;
-webkit-tap-highlight-color: transparent;
}
copy-paste it and then set your updates in the css
.MuiSlider-root {
/* update */
}
Material-ui is a css framework, if you want to use className for material-ui component
you have to injectFirst in root. example:
ReactDOM.render(
<StylesProvider injectFirst>
<App/>
</StylesProvider>
document.getElementById('root')
);
after this you will be able to use className anywhere on the app for any material-ui component

Material-UI: Overriding style classes

I was trying to follow the MUI guide on overriding MUI styles, but using styled-components instead of JSS. In particular, I could not get the first two approaches to work:
Using className
Using classes
I have made sure the injection order in head is correct, so that is not the issue. My problem is that the classes I need are not added to the DOM.
Also note: I managed to get normal styled-components to work well with MUI. I.e. the following works fine:
import React from 'react';
import Button from '#material-ui/core/Button';
import Typography from '#material-ui/core/Typography';
import styled from 'styled-components';
import { darken, fade } from '#material-ui/core/styles/colorManipulator';
const StyledButton = styled(Button)`
color: ${props => props.theme.palette.primary.contrastText };
background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
border-radius: ${props => props.theme.shape.borderRadius}px;
height: 48px;
padding: 0 30px;
box-shadow: 0 3px 5px 2px rgba(255, 105, 135, 0.3);
&:hover {
background: ${props => {
return `linear-gradient(45deg, ${darken(`#fe6b8b`, 0.2)} 30%, ${darken(`#ff8e53`, 0.2)} 90%)`;
}};
};
font-size: 1.2rem;
${props => props.theme.breakpoints.up('md')} {
font-size: 1rem;
}
`;
// In render:
<StyledButton>Hello World</StyledButton>
The following however, does not work:
styled(Typography)`
&.my-class {
margin-bottom: 5rem;
}
`;
// In render:
<Typography className="my-class" component="h2" variant="h2">
Dev Tools does show that my-class is indeed added, but, the class does not get added to the DOM. I followed this guide (Third Method).
Any idea why?
PS: I do not want to turn Typography into a StyledTypography component. I know that works (see first example above). Instead, I want to follow the override guide in the MUI docs.
Edit
Relevant installed packages:
"#material-ui/core": "^3.9.3"
"styled-components": "^4.2.0",
Edit 2:
I got it to work if I import an external style sheet:
// style.css
.my-class2 {
margin-bottom: 3rem;
}
// index.js
import React from 'react';
import Typography from '#material-ui/core/Typography';
import './style.css';
const IndexPage = () => (
<>
<Typography className="my-class2" component="h2" variant="h2">
Testing h2 (MUI)
</Typography>
</>
);
<Typography className="my-class2" component="h2" variant="h2">
Testing h2 (MUI)
</Typography>
However, I would like to keep it all inside the component.
Thus, my problem boils down to:
How can I add locally scoped styles to the DOM from within a component, without for instance creating a new component tag / variable with styled-components?

styled components / react

Im working on a simple button example which i plan to extend. I have added a new button and included some constants as well. so far so good. In case i want to use more button versions like version1, version2, version3 of the same button with some styles changed like the background color. How should i do that? And how should they be exported?
const PrimaryButton = styled.button`
font: inherit;
padding: 0.5em 1em;
border: 1px solid;
background-color: ${buttonBackgroundColor};
color: ${buttonColor};
border-radius: 0.25em;
border-color: ${colors.blueLight};
margin-right: 0.5em;
cursor: pointer;
outline:none;
:hover {
background-color: ${colors.blueLight};
}
`;
Maybe it is possible to extend the button (how?) or does it make more sense to add different components for each button? For my typography i have use "extend". That works. How would that be for the different button versions? Is there a similar way?
export const H1 = styled.h1`
font-size: 30px;
color: red;
`
export const H2 = H1.withComponent('h2').extend`
font-size: 24px;
`
It was working as i added a new component. I imported the PrimaryButton into the new defined component called "Version2".
import PrimaryButton from './primary';
From here i updated the PrimaryButton like this:
const Version2 = PrimaryButton.extend`background-color: red;`
This has the advantage that we have a master component for a button. Now we are able to extend the master with diversity of additional styles. In my case background-color.
With the help of
export default Version2;
we are now able to add this button called "Version2" into our render function like:
<PrimaryButton>ClickMe!</PrimaryButton>
<Version2>ClickMe!</Version2>
and now we get the different buttons. And it´s very modular and clean as well.

Categories

Resources