I'm using material ui for a react app. I'm also using material table. My nav bar just uses the default styling that material ui provides. This has been working fine. However when I add material table to the page, the nav bar goes from blue to white! I'm not sure how to resolve this. The code is below:
class ProfilePage extends React.Component {
render() {
const rows = [
{ title: "Time", field: "time" },
{ title: "Type", field: "type" },
{ title: "Feature", field: "feature" },
{ title: "Weight", field: "weight" }
];
const {Profile, error, match } = this.props;
const features = Profile;
const userId = `ID: ${match.params.userId}`;
if (error || Object.entries(tasteProfile).length === 0) {
toastr.error(error);
featureTable = <h2>Couldn't find profiles for that id</h2>;
}
return (
<div>
<NavBar />
<Typography id="userId" variant="h6" color="inherit">
{userId}
</Typography>
<Paper>
<div>
<MaterialTable
title="Profiles"
columns={rows}
data={features["features"]}
>
</MaterialTable>
</div>
</Paper>
</div>
);
}
}
Grateful for any help!
Try using the same versions of material-ui/core and material-ui/icons that material-table uses as seen in the package-lock.json file. I was able to fix my AppBar CSS style issue by downgrading these to the same version.
npm uninstall #material-ui/core
npm uninstall #material-ui/icons
npm install #material-ui/core#4.0.1
npm install #material-ui/icons#4.0.1
Have you tried including the Material table stylesheet before the Material UI kit one?
Related
I'm in the process of upgrading from Mui4 to 5.
After upgrading, my index file looks like that (note I'm using JSS, hence the StyledEngineProvider):
function renderApp() {
ReactDOM.render(
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
<CssBaseline />
<Typography variant="h2" component="h2">H2 TEST</Typography>
...
</ThemeProvider>
</StyledEngineProvider>,
document.getElementById('root'),
);
}
And my theme:
createTheme({
components: {
MuiTypography: {
defaultProps: {
title: 'test h2 title',
},
styleOverrides: {
root: {
fontSize: '10px',
fontWeight: 500,
},
},
},
},
});
I can see my theme been is used as the "title" attribute is added to my Typography component. But everything within styleOverrides seems to be dropped.
Also, colors added to theme.palette works, but theme.typography.h2 doesn't change any style either. I have the same logic for other components and it doesn't seems to work.
As specified in Styles broken after migrating to v5 I made sure StyledEngineProvider is at the top of the components tree and removed any trace of #material-ui/core (Mui4) from the application.
Following the migration doc, it wasn't clear that the following packages are mandatory even though you use JSS within your application and not emotion. Note that there is no warning whatsoever, for example emotion styles within the theme configuration will simply not be compiled.
You must install the following:
npm install #emotion/react #emotion/styled
There are two questions already on Stackoverflow:
Create Horizontal Timeline With
React How to create responsive horizontal timeline
None of them have any accepted answer. And also my question is specifically related to react-horizontal-timeline.
I'm creating my personal portfolio and I wish to show my education/college journey.
The author has given the code:
const VALUES = [ /* The date strings go here */ ];
export default class App extends React.Component {
state = { value: 0, previous: 0 };
render() {
return (
<div>
{/* Bounding box for the Timeline */}
<div style={{ width: '60%', height: '100px', margin: '0 auto' }}>
<HorizontalTimeline
index={this.state.value}
indexClick={(index) => {
this.setState({ value: index, previous: this.state.value });
}}
values={ VALUES } />
</div>
<div className='text-center'>
{/* any arbitrary component can go here */}
{this.state.value}
</div>
</div>
);
}
}
Since I'm coming from Angular and MVC frameworks, I didn't understand what this HorizontalTimeline is doing there. Is there anything I need to import? I'm asking this because the code is giving this error:
Line 13:22: 'HorizontalTimeline' is not defined react/jsx-no-undef
Looks like the compiler is not able to recognize HorizontalTimeline.
And also I would like to have it as a separate component for example <MyTimeline> or so. Why would I clutter my App.js. Hope I was able to explain. Please pitch in.
You need to import the component.
Unfortunately the vendor's documentation doesn't include the import statement. Further unfortunately still, the vendor's demo imports it directly from their source code. Which is fine if you're using their source code, but useless if you're installing their npm package.
Unless the IDE can find the import for you (VS Code should be able to, but anything could be preventing that) then best guesses would be:
import HorizontalTimeline from 'react-horizontal-timeline';
or:
import { HorizontalTimeline } from 'react-horizontal-timeline';
Check out this timeline component if you are interested. I think it's better for your need and also has much more clear documentation and a better horizontal mode.
react-chrono
Here is an example of a responsive timeline using the react-chrono component. I have also added some code that will automatically change to the vertical mode which is better for mobile view.
import React from "react";
import { Chrono } from "react-chrono";
class EducationTimeline extends React.Component {
constructor(props) {
super(props);
this.state = { matches: window.matchMedia("(min-width: 768px)").matches };
}
componentDidMount() {
const handler = (e) => this.setState({ matches: e.matches });
window.matchMedia("(min-width: 768px)").addEventListener("change", handler);
}
render() {
const items = [
{
title: "example",
cardTitle: "example",
cardSubtitle: "example",
cardDetailedText: "example",
}
];
return (
<div style={{ width: "500px", height: "400px" }}>
<Chrono
items={items}
mode={this.state.matches ? "HORIZONTAL" : "VERTICAL"}
slideShow={false}
itemWidth={"250"}
hideControls={true}
cardHeight={100}
borderLessCards={true}
theme={{
primary: "#01bf71",
secondary: "#010606",
cardBgColor: "#f7f8fa",
cardForeColor: "#010606",
titleColor: "#fff",
}}
></Chrono>
</div>
);
}
}
export default EducationTimeline;
I have react project with bootstrap packages
// npm install bootstrap#next
// npm install bootstrap-icons
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import 'bootstrap-icons/font/bootstrap-icons.css'
Then I have the tooltip element
<i className="bi bi-align-center" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top"></i>
The documentation says, we have to execute this javascript in order to enable bootstrap tooltip
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
So I put the code inside componentDidMount method, in a class where I am rendering the tooltip
but I am getting an error
'bootstrap' is not defined no-undef
or when I adjust the import tag to
import { bootstrap } from 'bootstrap/dist/js/bootstrap.bundle.min';
I get another error
Cannot read property 'Tooltip' of undefined
So I am confused how to enable this tooltip?
This is my vanilla TypeScript version.
Install and import bootstrap & typings
npm i #types/bootstrap bootstrap
import "bootstrap"
import "bootstrap/dist/css/bootstrap.css"
Create Tooltip component
import { Tooltip as BsTooltip } from "bootstrap"
import React, { useEffect, useRef } from "react"
export const Tooltip = (p: {children: JSX.Element, text: string}) => {
const childRef = useRef(undefined as unknown as Element)
useEffect(() => {
const t = new BsTooltip(childRef.current, {
title: p.text,
placement: "right",
trigger: "hover"
})
return () => t.dispose()
}, [p.text])
return React.cloneElement(p.children, { ref: childRef })
}
Use
<Tooltip text="Tooltip text">
<button className="btn btn-primary" type="button">My button</button>
</Tooltip>
You don't need to use react-bootstrap at all since Bootstrap 5 is now vanilla JavaScript...
You can import Bootstrap 5 JS components like this (note .esm version for modular importing)...
import { Tooltip } from 'bootstrap.esm.min.js'
then you can refer to the Tooltip like this...
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-
toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new Tooltip(tooltipTriggerEl)
})
React Bootstrap Tooltip example
When using Bootstrap with React, it is highly recommended to use React-Bootstrap.
React-Bootstrap has an OverlayTrigger component and a Tooltip component you can use for adding hover-able Tooltips.
In your case, it would look something like this
<OverlayTrigger
placement={'top'}
delay={{ show: 250, hide: 400 }}
overlay={
<Tooltip>
Tooltip on top
</Tooltip>
}
>
<i className="bi bi-align-center" />
</OverlayTrigger>
For using bootstrap in React, it is recommended to use react-bootstrap.
The steps to integrate that in your project are:
Install bootstrap in your project by adding package through terminal : npm install react-bootstrap bootstrap
Add this in your App.js.
import 'bootstrap/dist/css/bootstrap.min.css';
Add tooltip in your component by importing tooltip as follows: import { Tooltip} from 'react-bootstrap';
This would be the same for every react-bootstrap component
React-Bootstrap Tooltip documentation : https://react-bootstrap.github.io/components/overlays/#tooltips
I am just trying a React Select Dropdown Example using the below code:
import React from 'react';
import Select from 'react-select';
import '../../../node_modules/bootstrap/dist/css/bootstrap.min.css';
const techCompanies = [
{ label: "Apple", value: 1 },
{ label: "Facebook", value: 2 },
{ label: "Netflix", value: 3 },
{ label: "Tesla", value: 4 },
{ label: "Amazon", value: 5 },
{ label: "Alphabet", value: 6 },
]
const App = () => {
return (
<div className="container">
<div className="row">
<div className="col-md-4" />
<div className="col-md-4">
<Select options={ techCompanies } />
</div>
<div className="col-md-4" />
</div>
</div>
)
};
export default App
Before this , I installed react select
npm i react-select
also installed bootstrap
npm install bootstrap --save
But after running I am getting the error:
Unable to resolve "../../../node_modules/bootstrap/dist/css/bootstrap.min.css" from "components/university/App.js"
Failed building JavaScript bundle.
I can see the bootstrap.min.css under node_modules folder.
If I comment the import I am get the following :
View config not found for name div. Make sure to start component names with a capital letter.
Can anyone tell where am I going wrong?Thanks in Advance.
You can't use html components or the usual web css in react-native. In contrast to react web, react-native will map your components to native android, ios or windows ui components. Therefore your components must be composited of react-native components. I think you should check out this answer which explains the difference between react and react-native in more depth.
In your case you could start with an App Component similiar to this:
import React, { useState } from "react";
import { View, Picker, StyleSheet } from "react-native";
const techCompanies = [
{ label: "Apple", value: 1 },
{ label: "Facebook", value: 2 },
{ label: "Netflix", value: 3 },
{ label: "Tesla", value: 4 },
{ label: "Amazon", value: 5 },
{ label: "Alphabet", value: 6 },
]
const App = () => {
const [selectedValue, setSelectedValue] = useState(1);
return (
<View style={styles.container}>
<Picker
selectedValue={selectedValue}
style={{ height: 50, width: 150 }}
onValueChange={itemValue => setSelectedValue(itemValue)}
>
{techCompanies.map(({ label, value }) =>
<Picker.Item label={label} value={value} key={value} />)}
</Picker>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 40,
alignItems: "center"
}
});
export default App;
see https://reactnative.dev/docs/picker for reference.
Old answer, before we learned that this is about react-native:
Your original code actually looked fine and should work.
However the css import should usually be your first import, because you want styles inside imported components to take precedence over the default styles. source
The added braces and return are not needed at all...
Also I would recommend using
import 'bootstrap/dist/css/bootstrap.min.css'
instead of
import '../../../node_modules/bootstrap/dist/css/bootstrap.min.css'. The Babel+Webpack setup of create-react-app will take care of figuring out the location of the bootstrap module. If you use a relative path instead, there will be errors as soon as you move the file with the import...
Maybe something went wrong during your package installation? I'd suggest that you just try this:
rm -rf ./node_modules
npm install
npm run start
You can verify that your code was working in this sandbox: https://codesandbox.io/s/react-select-bootstrap-sample-g2264?file=/src/App.js
Your import looks fine. Sometimes the error messages throw us off track, as the real error is caused by some other compiling issue. So, try fixing this first:
You are confusing parentheses and curly braces. Plus, you are missing a return. Should be:
const App = () => {
return (
<div className="container">
<div className="row">
<div className="col-md-4" />
<div className="col-md-4">
<Select options={ techCompanies } />
</div>
<div className="col-md-4" />
</div>
</div>
);
};
I am trying to use semantic-ui-react with typescript to create a form . So I am using the documentation. However when I implement the dropdow or the form I am getting a basic HTML form without CSS. What should I do to get the same UX as react.semantic-ui.com
import { Dropdown } from 'semantic-ui-react'
const options = [
{ key: 1, text: 'Location 1', value: 1 },
{ key: 2, text: 'Location 2', value: 2 },
{ key: 3, text: 'Location 3', value: 3 },
]
return (
<Form>
<div>
<Dropdown
placeholder='Etat *'
title="Select Etat"
fluid
selection
options={StatusOptions}
/>
</div>
</Form>
You need to install the default theme using npm npm i semantic-ui-css
And later import that theme in your app.ts or index.ts
import 'semantic-ui-css/semantic.min.css'
Similar to the above answer by Fayeed. You can import the the CSS CDN in the header tag of index.html
For example:
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.css" />