I have this code
import React from 'react';
import { AutoSizer, List } from 'react-virtualized';
const ListItem= () => (
<AutoSizer disableHeight>
{({ width }) => (
<List
height={700}
overscanRowCount={10}
width={width}
rowHeight={100}
rowCount={publicBids.length}
rowRenderer={this.rowRenderer}
style={{ overflow: 'hidden' }}
/>
)}
</AutoSizer>
)
In the react-virtualize docs say that List components have Grid component and inside have this class ReactVirtualized__Grid and ReactVirtualized__Grid__innerScrollContainer
How can i change the property overflow for these class ?
You can just import a css file to declare your class to override style, like this:
.ReactVirtualized__Grid__innerScrollContainer {
overflow: visible !important;
}
or If your using the styled-components, like this:
export const Container = styled.div`
.ReactVirtualized__Grid__innerScrollContainer {
overflow: visible !important;
}
`;
remember the element should be in Container which you want to override.
Related
I like to add styling to a styled component that is in a different dom.
Like this Material-ui Menu component example, the dashboard button is highlighted gray, and the menu drop is highlighted light blue.
They are written in the same component file but they are in different dom.
I like to add styling to the Menu component from Button component.
Is that possible?
Demo sandbox: https://codesandbox.io/s/si8tr5?file=/demo.js
Menu material ui official doc: https://mui.com/material-ui/react-menu/#basic-menu
index.jsx
import * as React from 'react';
import MenuItem from '#mui/material/MenuItem';
import {DisplayMenu, DisplayButton} from './styles'
export default function BasicMenu() {
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<div>
<DisplayButton
id="basic-button"
aria-controls={open ? 'basic-menu' : undefined}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
onClick={handleClick}
>
Dashboard
</DisplayButton>
<DisplayMenu
id="basic-menu"
anchorEl={anchorEl}
open={open}
onClose={handleClose}
MenuListProps={{
'aria-labelledby': 'basic-button',
}}
>
<MenuItem onClick={handleClose}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
<MenuItem onClick={handleClose}>Logout</MenuItem>
</DisplayMenu>
</div>
);
}
styles.js
import styled from 'styled-components';
import Button from '#mui/material/Button';
import Menu from '#mui/material/Menu';
export const DisplayMenu = styled(Menu)`
padding: 20px;
`;
DisplayMenu.displayName = 'DisplayMenu';
export const DisplayButton = styled(Button)`
margin: 10px;
${DisplayMenu}{
& .MuiPaper-root {
width: 300px;
}
}
`;
DisplayButton.displayName = 'DisplayButton';
I know just doing this below will work but this is just an example and the reality is more complicated.
I just made it simple to ask this question here.
export const DisplayMenu = styled(Menu)`
padding: 20px;
& .MuiPaper-root {
width: 300px;
}
`;
Your current code won't work because you are applying styles to descendent DisplayMenu components (DisplayButton is a sibling). I don't really think it makes sense to do this but you could select the sibling:
export const DisplayButton = styled(Button)`
margin: 10px;
& + ${DisplayMenu}{
& .MuiPaper-root {
width: 300px;
}
}
`;
I think styling DisplayMenu directly makes the most sense (your last approach).
However If this is a permutation of DisplayMenu when used with a button, I think you should consider making the wrapper div into a styled component since that allows you to apply contextual styles to the menu (change its style based on 'where' it was used):
const MenuButton = styled.div`
${DisplayMenu}{
& .MuiPaper-root {
width: 300px;
}
`
// And use this in your component
<MenuButton>
<DisplayButton {...} />
<DisplayMenu {...} />
</MenuButton>
This way we only add the width to DisplayMenu when used within the context of MenuButton
image-1:
image-2:
I have a project that contains several interfaces, and among these interfaces there is an interface that displays two tables through “Tabs”, when I click on the first tab it displays the first table and when I click on the second tab it displays the second table, but my problem is only in the style of the Tabs and not my problem In the content, I want the style of the second image to be the same as the style of the first image
file.tsx:
import _ from 'lodash';
import { FunctionComponent } from 'react';
import { Tabs } from 'antd';
import AllPatients from './components/all-patients';
import AllPresentPatient from './components/present-patients';
import { FormattedMessage } from 'react-intl';
const { TabPane } = Tabs;
interface PatientListPageProps { }
const PatientListPage: FunctionComponent<PatientListPageProps> = () => {
return (
<>
<div style={{ background: '#fff', padding: '16px', borderColor: 'transparent', borderRadius: '4px' }}>
<Tabs type="card">
<Tabs.TabPane
tab={<FormattedMessage id='all' />} key="1">
<AllPatients />
</Tabs.TabPane>
<Tabs.TabPane tab={<FormattedMessage id='attendees' />} key="2">
<AllPresentPatient />
</Tabs.TabPane>
</Tabs>
</div>
</>
);
};
export default PatientListPage;
i think you must custom the css.
in tabs add the new name of classname
.custom-classname .ant-tabs-rtl {
direction: ltr !important;
}
if it doesn't change you can try using
.custom-classname {
direction: ltr !important;
}
then if you want the contents of the tab to stay on the right, you have to also customize the css so that the direction stays on the right
i think you will use ":global" to overwrite the default style in antd
like this
:global {
.ant-select-selection-item {
// overwrite style
...
}
}
I am attempting to create a floating "emergency exit" button for my React typescript application which will immediately take the user to weather.com. I'm having no trouble creating the button, but the requirements call for a tooltip when hovering over the button. Since we use chakra-ui throughout the product, using the Tooltip component they provide seems natural to me.
My first attempt looks like this:
Button.tsx
import React from "react";
import { Button as ChakraButton, ButtonProps } from "#chakra-ui/react";
interface Props extends ButtonProps {
buttonColor: string;
}
const Button: React.FC<Props> = ({
buttonColor,
children,
...restProps
}: Props) => (
<ChakraButton
backgroundColor={buttonColor}
color="white"
_hover={{
background: buttonColor
}}
_active={{
background: buttonColor
}}
padding="15px 30px"
height="auto"
fontSize="sm"
minWidth="200px"
borderRadius="100px"
fontFamily="AvenirBold"
{...restProps}
>
{children}
</ChakraButton>
);
export default Button;
EmergencyExitButton.tsx
import styled from "#emotion/styled";
import React from "react";
import Button from "./Button";
import { Tooltip } from "#chakra-ui/react";
const StyledButton = styled(Button)`
z-index: 99999;
position: fixed;
margin-left: calc(50% - 100px);
margin-top: 5px;
`;
export const EmergencyExitButton: React.FC = ({ children }) => {
const handleClick = () => {
window.open("https://weather.com", "_self");
};
return (
<>
<Tooltip
width="100%"
label="Immediately exit to the Weather Channel. Unsaved changes will be lost."
placement="bottom"
bg="black"
color="white"
>
<StyledButton buttonColor="#CC0000" onClick={handleClick}>
Emergency Exit
</StyledButton>
</Tooltip>
{children}
</>
);
};
When I insert this button into the application and hover over it, the tooltip appears in the top left corner of the screen and doesn't go away when you move the pointer away from the button. (codesandbox: https://codesandbox.io/s/objective-rain-z5szs7)
After consulting the chakra-ui documentation on Tooltip, I realized that I should be using a forwardRef for the wrapped component, so I modified EmergencyExitButton to look like this:
import * as React from "react";
import Button from "./Button";
import { Tooltip } from "#chakra-ui/react";
const EmergencyButton = React.forwardRef<HTMLDivElement>((props, ref) => {
const handleClick = () => {
window.open("https://weather.com", "_self");
};
return (
<div
ref={ref}
style={{
zIndex: 99999,
position: "fixed",
marginLeft: "calc(75% - 100px)",
marginTop: "5px"
}}
>
<Button buttonColor="#CC0000" onClick={handleClick}>
EmergencyExit
</Button>
</div>
);
});
EmergencyButton.displayName = "EmergencyButton";
export const EmergencyExitButton: React.FC = ({ children }) => (
<>
<Tooltip
width="100%"
label="Immediately exit to the Weather Channel. Unsaved changes will be lost."
placement="bottom"
bg="black"
color="white"
hasArrow
style={{ zIndex: 99999 }}
>
<EmergencyButton />
</Tooltip>
{children}
</>
);
In this iteration, the tooltip doesn't appear at all. (codesandbox: https://codesandbox.io/s/kind-voice-i230ku)
I would really appreciate any advice or ideas on how to make this work.
Edited to fix the code a little.
I figured it out. It turns out that instead of creating a forwardRef, I just needed to wrap the button in a span tag.
import React from 'react';
import Button from './Button';
import { Tooltip } from '#chakra-ui/react';
export const EmergencyExitButton: React.FC = ({ children }) => {
const handleClick = () => {
window.open('https://weather.com', '_self');
};
return (
<>
<Tooltip
width='100%'
label='Immediately exit to the Weather Channel. Unsaved changes will be lost.'
placement='bottom'
bg='black'
color='white'
>
<span style={{ zIndex: 99999, position: 'fixed', marginLeft: 'calc(50% - 100px)', marginTop: '5px'}}>
<Button buttonColor='#CC0000' onClick={handleClick}>Emergency Exit</Button>
</span>
</Tooltip>
{children}
</>
);
};
I think the prop shouldWrapChildren could be used in this case.
See https://chakra-ui.com/docs/components/tooltip/props
I'm using styled-components to override styling from an existing component, in this case ToggleButton from material ui. However I want my new component to have one additional property (hasMargin) that controls the style:
import {ToggleButton} from "#material-ui/lab";
import styled, {css} from "styled-components";
const StyledToggleButton = styled(ToggleButton)<{ hasMargin?: boolean }>`
&& {
color: red;
${props => props.hasMargin &&
css`
margin: 10px;
`}
}
`;
My intention is that StyledToggleButton behaves exactly like ToggleButton but has red color and can be called with an additional property hasMargin to turn on the margin css. I want to call it like this:
<StyledToggleButton
value={""} // ToggleButton prop
size={"small"} // ToggleButton prop
hasMargin={true} // My prop from StyledToggleButton
>
click
</StyledToggleButton>
But if I do it like this, in the browser console I get:
Warning: React does not recognize the `hasMargin` prop on a DOM element.
This is because StyledToggleButton seems to also pass hasMargin further to ToggleButton and ToggleButton of course can't and shouldn't deal with that (passing it down to the DOM element where it makes no sense). What is the best way to rewrite my code, so hasMargin is only processed by StyledToggleButton?
I've made a codesandbox to illustrate the issue. Thank you!
This is exactly what transient props are for.
All you need to do is prefix the prop with a $ and styled-components won't pass the prop to the underlying DOM element.
// Note the $ prefix in the prop name 👇
const StyledToggleButton = styled(ToggleButton)<{ $hasMargin?: boolean }>`
&& {
color: red;
// Just use the prop as normal
${(props) =>
props.$hasMargin &&
css`
margin: 10px;
`}
}
`;
<StyledToggleButton
value={""}
size={"small"}
{/* Assign the prop as normal */}
$hasMargin={true}
>
click
</StyledToggleButton>;
Here's your updated Codesandbox link with that error gone.
What about wrapping the ToggleButton with span and applying styles from there?
const StyledToggleButton = styled.span<{ hasMargin?: boolean }>`
margin: ${props => props.hasMargin && '50px'};
button {
color: red !important;
}
`
interface MyButtonProps extends ToggleButtonProps {
hasMargin?: boolean;
}
function MyButton(props: MyButtonProps) {
const { hasMargin, ...toggleButtonProps } = props;
return (
<StyledToggleButton hasMargin={hasMargin} >
<ToggleButton {...toggleButtonProps}>
{props.children}
</ToggleButton>
</StyledToggleButton>
);
}
export default function App() {
return (
<div className="App">
<MyButton value={""}>click</MyButton>
<MyButton value={""} size={"small"} hasMargin={true}>
click
</MyButton>
</div>
);
}
Using ReactJS and MUI, I have a project in which I have changed the theme colors.
const newTheme = getMuiTheme({
fontFamily: 'Roboto, sans-serif',
palette: {
primary1Color: cyan500,
primary2Color: cyan700,
primary3Color: grey400,
accent1Color: amberA400,
accent2Color: grey100,
accent3Color: grey500,
textColor: darkBlack,
alternateTextColor: white,
canvasColor: white,
borderColor: grey300,
disabledColor: fade(darkBlack, 0.3),
pickerHeaderColor: cyan500,
clockCircleColor: fade(darkBlack, 0.07),
shadowColor: fullBlack,
},
});
// App class
render() {
return(
<ThemeProvider theme={newTheme}>
<Project />
</ThemeProvider>
)
}
Everything works as expected. Certain components, like buttons have the ability to set the color based on the primary prop. However, I have a component that uses an icon that needs the primary color. I can import the color and set it directly:
import React from 'react';
import ActionLock from 'material-ui/svg-icons/action/lock';
import {cyan500} from 'material-ui/styles/colors';
export default class LockIcon extends React.Component {
render() {
return(
<ActionLock color={cyan500} />
)
}
}
Is there some way to reference the theme's primary color, rather than setting the color in each component individually? Something like:
import React from 'react';
import ActionLock from 'material-ui/svg-icons/action/lock';
import {primary1Color} from 'somewhere';
export default class LockIcon extends React.Component {
render() {
return(
<ActionLock color={primary1Color} />
)
}
}
If you're using React v16.8.0 and Material-UI v3.5.0 or greater, you can utilize the useTheme() hook:
import { useTheme } from '#material-ui/core/styles';
function LockIcon = () => {
const theme = useTheme();
return (
<ActionLock color={theme.palette.primary1Color} />
}
Yes you have!
using muiThemeable..
import muiThemeable from 'material-ui/styles/muiThemeable';
class LockIcon extends React.Component {
render() {
return(
<ActionLock color={this.props.muiTheme.palette.primary1Color} />
)
}
}
export default muiThemeable()(LockIcon)
from material-ui docs
Adding how to access theme colors in material-ui v1.0.0 (currently beta) Using withTheme component.
Also check the following Example.
import React, {Component} from 'react';
import { withTheme } from 'material-ui/styles';
class WithThemeExample extends Component {
render() {
const { theme } = props;
const {primary, secondary} = theme.palette.text;
return (
<div>
<div style={{color: primary}}>Hi in Primary color</div>
<div style={{color: secondary}}>Bye in Secondary color</div>
</div>
);
}
}
export default withTheme()(WithThemeExample);
If you're using system properties, you can define a string path of the Palette object to the color value like below:
<Box sx={{ color: "primary.main" }}>primary.main</Box>
<Box sx={{ color: "secondary.main" }}>secondary.main</Box>
<Box sx={{ color: "error.main" }}>error.main</Box>
<Box sx={{ color: "warning.main" }}>warning.main</Box>
<Box sx={{ color: "info.main" }}>info.main</Box>
<Box sx={{ color: "success.main" }}>success.main</Box>
<Box sx={{ color: "text.primary" }}>text.primary</Box>
<Box sx={{ color: "text.secondary" }}>text.secondary</Box>
<Box sx={{ color: "text.disabled" }}>text.disabled</Box>
The above is the same as:
<Box sx={{ color: theme => theme.palette.primary.main }}>primary.main</Box>
<Box sx={{ color: theme => theme.palette.secondary.main }}>secondary.main</Box>
<Box sx={{ color: theme => theme.palette.error.main }}>error.main</Box>
<Box sx={{ color: theme => theme.palette.warning.main }}>warning.main</Box>
<Box sx={{ color: theme => theme.palette.info.main }}>info.main</Box>
<Box sx={{ color: theme => theme.palette.success.main }}>success.main</Box>
<Box sx={{ color: theme => theme.palette.text.primary }}>text.primary</Box>
<Box sx={{ color: theme => theme.palette.text.secondary }}>text.secondary</Box>
<Box sx={{ color: theme => theme.palette.text.disabled }}>text.disabled</Box>
The example using the callback is more verbose but is type-safe, the shorter one with only string is quicker and good when prototyping, but you may want to store the string in a constant to prevent any typo errors and help the IDE refactor your code better.
Live Demo
Ok if you are using material-ui version greater than 4, then the above solution might not work for you. Follow the below's code
import { withTheme } from '#material-ui/core/styles';
function DeepChildRaw(props) {
return <span>{`spacing ${props.theme.spacing}`}</span>;
}
const DeepChild = withTheme(DeepChildRaw);
Reference: https://material-ui.com/styles/advanced/
With react hooks, now you don't need to warp component in withTheme, just use useTheme:
import { useTheme } from '#material-ui/core/styles';
export default function MyComponent() {
const theme = useTheme();
return <span>{`spacing ${theme.spacing}`}</span>;
}
MUI V5
For the users of MUI v5, you can specify a function inside the sx css style directly, ex:
<Box sx={{ color: (theme) => theme.palette.primary1Color }} />
You can use the useTheme() hook and access the colors like the example below.
There are also some other color variants as well.
Mui 5:
import * as React from 'react';
import PropTypes from 'prop-types';
import { NavLink } from "react-router-dom";
import { useTheme } from "#mui/material/styles";
function VinNavLink(props) {
const theme = useTheme();
return (
<NavLink {...props} style={({ isActive }) => isActive ? { textDecoration: "underline", color: theme.palette.primary.main} : undefined}>{props.children}</NavLink>
);
}
export default VinNavLink;