Here is my simple styled button
import styled from 'styled-components';
import Button from '#material-ui/core/Button';
import ArrowForwardIosIcon from '#material-ui/icons/ArrowForwardIos';
const MyButton = styled(Button)`
font-size: 11px;
`;
<MyButton
variant="outlined"
color="primary"
size="small"
disableElevation
endIcon={<ArrowForwardIosIcon />}
>
CLICK ME
</MyButton>
So how do I change endIcon size. I can change it in Chrome dev tool but have no idea what to add to MyButton definition. Assume it should be something like this in styled button definition:
&.MuiButtonendIcon {
color: green;
font-size: 15px;
}
you can style the individual endIcon by targeting the svg element and setting its font-size property like this
const MyButton = styled(Button)`
& .MuiButton-endIcon svg {
font-size: 50px;
color: green;
}
`;
I solved it this way:
const MyButton = styled(Button)`
*:first-of-type svg{
font-size: 50px;
color: green;
}
`;
Related
I would like to pass style to two styled component using emotion.
I've tried like this, but ${commonStyle} doesn't inherit to styled.a and styled.span:
const commonStyle = css`
color: #000;
font-size: 1.6rem;
`;
const commonLink = styled.a`
${commonStyle}
`;
const whiteLink = styled.span`
${commonStyle}
color: #fff;
`;
How can I extend css using emotion?
I have came across a solution. Instead of inheriting commonStyle as the first property in commonLink and whiteLink, inherit it as the last property of the both commonLink and whiteLink.
Look at the code below, I am inheriting commonStyle styles into Child component and its working fine.
import styled from '#emotion/styled'
import {css} from '#emotion/css'
const commonStyle = css`
color: purple;
`
const Child = styled.div`
font-size: 1.6rem;
${commonStyle}
`
const Parent = styled.div`
${Child} {
color: green;
}
`
render(
<div>
<Parent>
<Child>Green</Child>
</Parent>
<Child>Purple</Child>
</div>
)
Material-ui/ReactJS newbie question. I'm trying to show a pointer cursor when hovering over a Material-ui TextField but having a difficult time doing so. It makes use of 'cursor: text' by default. I've been able to successfully change the textfield background color on hover but adding "cursor: pointer !important" does no good. I've tried making use of className, class, style (inline), but I'm certain I'm not doing something correctly. Material-ui has a demo illustrating how to change textfield styling on hover and focused at [https://codesandbox.io/s/p7uwn?file=/demo.js][1] where I have also tried changing the cursor to a pointer on hover but still no luck. Any assistance would be greatly appreciated.
import React from 'react';
import styled from 'styled-components';
import { TextField, NoSsr } from '#material-ui/core';
const StyledTextField = styled(TextField)`
label.Mui-focused {
color: green;
}
.MuiOutlinedInput-root {
fieldset {
border-color: red;
}
&:hover fieldset {
border-color: yellow;
cursor: pointer !important;
}
&.Mui-focused fieldset {
border-color: green;
}
}
`;
export default function GlobalClassName() {
return (
<NoSsr>
<StyledTextField label="Deterministic" variant="outlined" id="deterministic-outlined-input" />
</NoSsr>
);
}
Just a quick browser inspection gave the CSS component we need to target. It's
.MuiOutlinedInput-input
Just giving it a
cursor: pointer;
property will solve your problem.
Here is the code:
import React from 'react';
import styled from 'styled-components';
import { TextField, NoSsr } from '#material-ui/core';
const StyledTextField = styled(TextField)`
label.Mui-focused {
color: green;
}
.MuiOutlinedInput-input {
cursor: pointer;
}
.MuiOutlinedInput-root {
fieldset {
border-color: red;
}
&:hover fieldset {
border-color: blue;
cursor: pointer;
}
&.Mui-focused fieldset {
border-color: green;
}
}
`;
export default function GlobalClassName() {
return (
<NoSsr>
<StyledTextField label="Deterministic" variant="outlined" id="deterministic-outlined-input" />
</NoSsr>
);
}
Or just literally put cursor:pointer into its css, either in-line as <Component style={{cursor: 'pointer'}}> or <Component sx={{cursor: 'pointer'}}> or in its styled component css. This will automatically change your mouse onHover, and the top answer here is way over the top. Just add cursor: 'pointer' to the component's css.
Using
<TextField sx={{ cursor: 'pointer' }} />
did not work for me, instead, I needed to specify it as
<TextField sx={{ input: { cursor: 'pointer' } }}
which did affect the desired change.
like the title says, how do I use input[type="search"]::-webkit-search-decoration:hover {cursor: pointer;} in a styled component?...
the code below isn't working or being recognized.
const SomeInput = styled.input`
border-radius: 8px;
input[type="search"]::-webkit-search-decoration:hover,
input[type="search"]::-webkit-search-cancel-button:hover {
cursor:pointer;
}
`;
Trying to implement from here as a styled component: display pointer on hover close icon in search textbox
I got this working by using the ampersand character inside the styled component and added type="search" in the JSX.
import React from "react";
import "./styles.css";
import styled from "styled-components";
export default function App() {
const SomeInput = styled.input`
border-radius: 8px;
&::-webkit-search-decoration:hover,
&::-webkit-search-cancel-button:hover {
cursor: pointer;
}
`;
return (
<div className="App">
<SomeInput type="search" />
</div>
);
}
CodeSandbox
I am trying to change the color and the size of the DropdownMenu using the styled-components like the code below:
const DropdownCustom = styled.DropdownMenu`
font-family: sans-serif;
font-size: 1.3rem;
border: none;
border-radius: 5px;
background-color: red;
`;
Then I try to use it like this:
<Dropdown>
<button onClick={() => setState(!state)}>Create</button>
<DropdownCustom hidden={!state}>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownCustom>
</Dropdown>
But it gives me an error saying that _styledComponents.default.DropdownMenu is not a function.
I am very new to styling with css and it is very confusing, so any advice or guide would be really appreciated! :)
Edited
import {
Dropdown,
DropdownItem,
DropdownMenu
} from "styled-dropdown-component";
If you trying to style a custom component you need to use styled as a function:
const DropdownCustom = styled(DropdownMenu)`
font-family: ...
`;
It will work only if the custom component uses the className props.
Therefore, you sometimes want to style custom component's parent, and target the styling with selectors - as it's just a CSS:
const Wrapper = styled.div`
font-family: ...;
.dropDown {
....;
}
`;
<Wrapper>
<Dropdown />
</Wrapper>
I'm using styled-system with styled components and have a basic case like this:
const buttonFont = {
fontFamily: "Chilanka"
};
// style a boilerplate for text
const Text = styled.div`
${typography}
${color}
`;
// button blueprint
const Button = ({ children, ...rest }) => {
return (
<Text as="button" {...buttonFont } {...rest}>
{children}
</Text>
);
};
// styled button using button
const StyledButton = styled(Button)`
color: white;
background-color: gray;
padding: 10px 20px;
border: 2px solid black;
`;
// When using "as" this component does not includes buttonFont styles
const StyledLabel = styled(StyledButton).attrs({
as: "label"
})``;
I want to create a StyledLabel which will inherit all styles from StyledButton, but change tag to label. But StyledLabel does not get the buttonFont styles when using "as" attribute.
Please see live example here: demo
I'm not sure what your end goal is, but these 2 examples worked in terms of inheritance. However, they might not help with your plan for composition:
import React from "react";
import styled, {css} from "styled-components";
import { typography, color } from "styled-system";
import ReactDOM from "react-dom";
import "./styles.css";
const buttonFont = {
fontFamily: "Chilanka"
};
const Text = styled.div`
${typography}
${color}
margin: 24px;
`;
const StyledButton = styled(Text)`
color: white;
background-color: gray;
padding: 10px 20px;
border: 2px solid black;
`;
const StyledLabel = styled(StyledButton)`
color: yellow;
`;
const __Text = styled.div`
${typography(buttonFont)}
${color}
margin: 24px;
`;
const __StyledButton = styled(__Text)`
color: white;
background-color: gray;
padding: 10px 20px;
border: 2px solid black;
`;
const __StyledLabel = styled(__StyledButton)`
color: yellow;
`;
function App() {
return (
<div className="App">
<StyledButton as="button" {...buttonFont}>styled button</StyledButton>
<StyledLabel as="label" {...buttonFont}>Does inherit styled font with "as"</StyledLabel>
<br />
<br />
<br />
<__StyledButton as="button">styled button</__StyledButton>
<__StyledLabel as="label">Does inherit styled font with "as"</__StyledLabel>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);