I'm having a problem with the Chakra UI box or flex items (not sure which one is causing the problem). I can't make them take 100% width on tablets and mobiles. The only way I managed to make it work is by defining VW width but that's not responsive on all devices.
How it looks now:
how it should look:
Code (the part of code that's not working is the first ternary option):
enter code here
import React from 'react'
import { Box, Flex, useMediaQuery } from '#chakra-ui/react'
import Section from 'components/section/Section'
import HoursCellList from 'components/schedule/hours/HoursCellList'
import DaysCellList from './days/DaysCellList'
import EventsComponent from 'components/schedule/events/EventsComponent'
import MobileDaysCellList from './days/MobileDaysCellList'
import MobileEventsFlex from 'components/schedule/events/MobileEventFlex'
interface Props {}
const ScheduleComponent = (props: Props) => {
const [isSmallScreen] = useMediaQuery('(max-width: 1350px)')
const [mobileClickedDay, setMobileClickedDay] = useState<number>(0)
return (
<Section isGray heading="Schedule" id="schedule">
<Box py={['2', '4', '8']}>
{isSmallScreen ? (
<Flex justifyItems="stretch">
<Box>
<HoursCellList isMobile={isSmallScreen} />
</Box>
<Flex flexDirection="column" bg="#fff" flex="1">
<MobileDaysCellList clickedDay={mobileClickedDay} onClick={setMobileClickedDay} />
<MobileEventsFlex clickedDay={mobileClickedDay} />
</Flex>
</Flex>
) : (
<>
<HoursCellList isMobile={isSmallScreen} />
<Flex w="1200px" bg="#fff">
<DaysCellList />
<EventsComponent />
</Flex>
</>
)}
</Box>
</Section>
)
}
export default ScheduleComponent
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
All other page components are in Section component as children, and they work fine, just this one is causing the problem...
Section component code:
import React from 'react'
import SectionHeading from './SectionHeading'
import { Box, Center, BoxProps } from '#chakra-ui/react'
interface Props {
heading?: string
subHeading?: string
isGray?: boolean
id?: string
children: React.ReactNode
}
type SectionProps = Props & BoxProps
const Section = ({ children, heading = '', subHeading = '', isGray = false, id = '', ...props }: SectionProps) => {
return (
<Center>
<Box
bg={isGray ? 'primaryBg' : 'secondaryBg'}
color="primaryText"
zIndex="0"
w="100%"
pt={['47px', '56px', '70px']}
pb={['12', '16', '24']}
minHeight="100vh"
d="flex"
alignItems="center"
{...props}
id={id}
>
<Box maxWidth="1366px" mx="auto" px={['15px', '43px', '83px']}>
<Box>
<SectionHeading heading={heading} subHeading={subHeading} />
{children}
</Box>
</Box>
</Box>
</Center>
)
}
export default Section
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
I can't believe that the problem is such a stupid thing haha,
Problem is fixed by adding w='100%' in Section component next to maxWidth='1366px'
Related
i'm currently working on a project using stitches with cra but i've stuck to a problem with css props.
here's my code
Texts/index.tsx
import React from 'react';
import { TextStyle } from './textStyle';
const Texts = ({ text, css }: PropsType) => {
console.log(css);
return (
<>
<TextStyle css={{ ...css }} >
<>{text}</>
</TextStyle>
</>
);
};
export default Texts;
and this index.tsx is exported to another components
Container/index.tsx
import { styled, css } from '../../../stitches.config';
// atoms
import Texts from 'src/components/atoms/texts';
const PageContainer = () => {
return (
<Container>
<Contents >
<div>
<Texts
css={{ color: 'red' }}
/>
<Texts
css={{ paddingTop: '20px' }}
/>
</div>
</Contents>
</Container>
);
};
export default PageContainer;
as you can see with the above code, contains css as its child but css is never rendered at all
can anyone help me with this issue?
FYI, console.log(css); returned undefined to me.
Thank you in advance!
I want to implement dragging components (beautiful dnd) so that the user can swap them. But for this, each component must have an id, as I understand it. But I do not know how to do it
import React from 'react';
import CardWeather from '../cardWeather/CardWeather';
import WeatherMap from '../cardWeatherMap/WeatherMap';
import Forecast from '../forecast/Forecast';
import WeatherGrapth from '../weatherGraph/WeatherGraph';
import './main.scss';
import { Droppable } from 'react-beautiful-dnd';
const Main = () => {
return (
<>
<Droppable droppableId="main">
{
(provided) => (
<div className="main-container"
ref={provided.innerRef}
{...provided.droppableProps}
>
<CardWeather />
<Forecast/>
<WeatherGrapth/>
<WeatherMap/>
</div>
)
}
</Droppable>
<div className="pr">weather app</div>
</>
)
}
export default Main;
Hi, to do that you also need to use Draggable Component importing from 'react-beautiful-dnd'.
And also if you don't have unique ids for your items you can use 'react-uuid' package to pass through to 'draggableId'. It will create unique ids for you.
And also I am highly recommending to you watch this course about "react-beautiful-dnd". This course was created by who developed "react-beautiful-dnd".
https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd
import React from 'react';
import CardWeather from '../cardWeather/CardWeather';
import WeatherMap from '../cardWeatherMap/WeatherMap';
import Forecast from '../forecast/Forecast';
import WeatherGrapth from '../weatherGraph/WeatherGraph';
import './main.scss';
import { Droppable, Draggable } from 'react-beautiful-dnd';
import uuid from 'react-uuid';
const Main = () => {
return (
<>
<Droppable droppableId="main">
{
(provided) => (
<Draggable
draggableId={uuid()}
index={"element index"}
>
{(provided, snapshot) => {
<div className="main-container"
ref={provided.innerRef}
{...provided.droppableProps}
isDragging={snapshot.isDragging}
>
<CardWeather />
<Forecast />
<WeatherGrapth />
<WeatherMap />
</div>
}}
</Draggable>
)
}
</Droppable>
<div className="pr">weather app</div>
</>
)
}
export default Main;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
If I get this correctly you need to have some kind of id for every component in your case:
<CardWeather />
<Forecast/>
<WeatherGrapth/>
<WeatherMap/>
You can pass the id by props for each component. Example:
Main component:
<CardWeather id="1" />
CardWeather component:
function CardWeather(props){
const id = props.id
...
return(
<div data-id={id}>
...
</div>
)
}
...
And you have to do that for every component you want to drag and drop.
It's best to have also a key prop to each component. So that if I'd changes you will get a rerender.
could someone please help me with this issue.
this is the code:
import { AppBar } from "#mui/material";
import { makeStyles } from "#mui/styles";
const useStyles = makeStyles({
root: {
backgroundColor: 'red'
}
})
const App = () => {
const classes = useStyles();
return <>
<AppBar className={classes.root}>
test
</AppBar>
<h1 className={classes.root}>test</h1>
</>
}
export default App;
The question is:
why the background-color of the AppBar component is not changing;
No problem with the h1 tag thought;
The other problem I've found is, sometimes it changes, but when I refresh the page, it becomes blue -> color by default;
So, thanks a lot for the answer if there is any :);
I faced a similar issue where styles applied to the AppBar component did not override some of the default styles. The fix was to wrap my component tree with <StyledEngineProvider injectFirst>. The solution looks something like this in the end:
import React from 'react';
import { StyledEngineProvider } from '#mui/material/styles';
export default function GlobalCssPriority() {
return (
<StyledEngineProvider injectFirst>
{/* Your component tree. Now you can override MUI's styles. */}
</StyledEngineProvider>
);
}
Link to source
<AppBar className={classes.root}>
test
</AppBar>
instead wrap your text in a div and use className on that div
<AppBar >
<div className={classes.root}>
test
</div>
</AppBar>
I want to create a custom two-column-grid layout on my react-admin project on Edit and Show pages. I want to display selectboxes and the imageupload area on the left column, and the text inputs on the right column by using only one <SimpleForm>.
Simply like this
If I use a div or a <Card> component under <SimpleForm> and <EditController> components, I receive an error.
Warning: React does not recognize the `basePath` prop on a DOM element.
If you intentionally want it to appear in the DOM as a custom
attribute, spell it as lowercase `basepath` instead. If you
accidentally passed it from a parent component, remove it from the DOM
element.
Is there any way to create a layout without this error?
I solved it with creating another component with using divs, <Grid/> etc, and used that component in <SimpleForm> component.
import {withStyles} from '#material-ui/core/styles';
import React from 'react';
import {
EditController,
SimpleForm,
TextInput,
SelectInput,
Title,
} from 'react-admin';
import Grid from '#material-ui/core/Grid';
import Card from '#material-ui/core/Card';
import Poster from "../customField/Poster";
import {EditToolbar} from '../toolbar/CustomToolbar'
import {EditActions} from '../toolbar/CustomActions'
const editStyles = {
root: {display: 'flex', alignItems: 'flex-start', width: '100%'},
form: {flexGrow: 9},
};
class CardEdit extends React.Component {
constructor(props) {
super(props);
this.state = {
refresh: false
};
}
render() {
const FormDiv = withStyles(editStyles)(({children, classes, ...props}) => {
return (
<div className={classes.root}>
<div className={classes.form}>
<Grid container spacing={24}>
<Grid item xs={6}>
<TextInput source="name" fullWidth />
</Grid>
<Grid item xs={6}>
<TextInput source="card_id" fullWidth />
</Grid>
</Grid>
</div>
</div>
)
}
)
return (
<EditController {...this.props}>
{({resource, record, redirect, save, basePath, version}) => {
return (
<div>
<Title defaultTitle="sample"/>
<Card>
<div style={{ margin: '20px 20px 0 0' }}>
<EditActions
basePath={basePath}
resource={resource}
data={record}
hasShow
hasList
/>
</div>
{record && (
<SimpleForm
basePath={basePath}
redirect={redirect}
resource={resource}
record={record}
save={save}
version={version}
toolbar={<EditToolbar/>}
>
<FormDiv record={record} />
</SimpleForm>
)}
</Card>
</div>
)
}}
</EditController>
)
}
}
export default withStyles(editStyles)(CardEdit);
Actually, this could be done a little bit easier in case you don't need any custom styles and what not.
In order to get rid of the basePath error, just sanitize the props passed to the Material UI Grid Component:
const SanitizedGrid = ({basePath, ...props}) => {
return (
<Grid {...props} />
);
};
Then use it in place of a normal Grid:
export default props => (
<SimpleForm {...props}>
<SanitizedGrid container spacing={16}>
<Grid item xs>
<TextInput source="name" />
</Grid>
</SanitizedGrid>
</SimpleForm>
);
As another way, I've just worked out (thanks to Alexander's answer) a nice generic way to add any custom HTML content to a react-admin form:
import React, { Fragment } from 'react';
import { SimpleForm } from 'react-admin';
const CustomContent = ({ basePath, record, resource, children }) => (
<Fragment>
{children}
</Fragment>
);
export const MyForm = (props) => (
<SimpleForm>
<CustomContent>
<h3>Custom Content</h3>
<p>I can now add standard HTML to my react admin forms!</p>
</customContent>
</SimpleForm>
);
You get the basePath prop (which you probably don't want), but the record and resource props might be useful to your custom content (if you switch the code to use a render prop)
I'm using the material ui library in my react project, and I have come across a strange issue, when I try to use svg icons inside a button-icon, the icom doesn't align to the center.
for example:
<ListItem key={product.id}
primaryText={product.title}
leftAvatar={<Avatar src={product.img}/>}
rightIcon={<IconButton><RemoveIcon/></IconButton>}/>
for this code I will get the following result:
And for this code:
<ListItem key={product.id}
primaryText={product.title}
leftAvatar={<Avatar src={product.img}/>}
rightIcon={<RemoveIcon/>}/>
I will get the following result :
My question is, how do i get to the result of my second example, but that the icon will we inside another element?
This is kind of late but I recently had the same issue and solved it by wrapping the IconButton component in a custom component and extending the css. You may have to change some other CSS to make it align perfectly but this worked for my use case.
import React, { PropTypes, Component } from 'react';
import IconButton from 'material-ui/IconButton';
const CustomIconButton = (props) => {
const { style } = props;
const additionalStyles = {
marginTop: '0'
};
return(
<IconButton {...props } style={{ ...style, ...additionalStyles }} iconStyle={{ fontSize: '20px' }}/>
);
};
CustomIconButton.PropTypes = {
// listed all the props that IconButton requires (check docs)
};
export default PPIconButton;
This is what a simplified usage of this custom IconButton looks like:
const deleteIconButton = (deleteFunc) => {
return <CustomIconButton
touch={true}
tooltip="Delete"
tooltipPosition="top-right"
onTouchTap={deleteFeed}
iconClassName="fa fa-trash"
/>;
};
class MyList extends Component {
render() {
return (
<div>
<List>
<ListItem value={ i } primaryText="My List Item" rightIcon={ deleteIconButton(() => this.props.deleteFeed(i) } />
) }
</List>
</div>
);
}
}
Passing the styles down to the inner element worked for me:
return <SvgIcon style={this.props.style} />
check this code, working fine for me
import React from 'react';
import List from 'material-ui/List';
import ListItem from 'material-ui/List/ListItem';
import Delete from 'material-ui/svg-icons/action/delete';
const MenuExampleIcons = () => (
<div>
<List style={{width:"300px"}}>
<ListItem primaryText="New Config" leftIcon={<Delete />} />
<ListItem primaryText="New Config" rightIcon={<Delete />} />
</List>
</div>
);
export default MenuExampleIcons;