I have a React.js app with Typescript. I want to disable visited Material Icons coloring on an anchor tag and I have the following stylesheet.
const useStyles = makeStyles((theme: Theme) =>
createStyles(
myAnchor: {
"&:visited": {color: "inherit"},
"&:hover": {color: "inherit"},
"&:active": {color: "inherit"}
}
...
)
const classes = useStyles();
But it did not work when I did <a className={classes.myAnchor}><FacebookIcon /></a>. Did I get anything wrong with "&:visited"?
You can use Material-UI IconButtn
import React from "react";
import "./styles.css";
import { makeStyles, IconButton } from "#material-ui/core";
import FacebookIcon from "#material-ui/icons/Facebook";
const useStyles = makeStyles(theme => ({
icon: {
"& :visited": { color: "red" },
"& :hover": { color: "red" },
"& :active": { color: "red" }
}
}));
export default function App() {
const classes = useStyles();
return (
<div className="App">
<IconButton
className={classes.icon}
// component={Link}
// to={`/url`}
>
<FacebookIcon />
</IconButton>
</div>
);
}
Related
Based on the documentation, I can style the component like this:
import * as React from 'react';
import { makeStyles } from '#mui/styles';
import Button from '#mui/material/Button';
const useStyles = makeStyles({
root: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
border: 0,
borderRadius: 3,
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
color: 'white',
height: 48,
padding: '0 30px',
},
});
export default function Hook() {
const classes = useStyles();
return <Button className={classes.root}>Hook</Button>;
}
Or like this:
import * as React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '#mui/styles';
import Button from '#mui/material/Button';
const styles = {
root: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
border: 0,
borderRadius: 3,
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
color: 'white',
height: 48,
padding: '0 30px',
},
};
function HigherOrderComponent(props) {
const { classes } = props;
return <Button className={classes.root}>Higher-order component</Button>;
}
HigherOrderComponent.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(HigherOrderComponent);
I've been trying to find a way to edit the style when an event gets triggered. For example, when the user enables dark mode:
const manageDarkModeUpdateWhenUserTogglesIt = () => {
window.addEventListener("storage", () => {
// This gets triggered when the user enables dark mode
// I need to update the style here
});
};
I need to update the style there. But, I couldn't find a way to do so in both of the approaches mentioned above and anything I try causes some error. Any help?
You can use theming feature of MUI, you can add 2 modes (light & dark) and customize each mode by the style you want, then you can access the style inside makeStyle:
const getTheme = (mode) => {
return mode === 'light'
? //regular style
{
root: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
border: 0,
borderRadius: 3,
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
color: 'white',
height: 48,
padding: '0 30px',
},
}
: //dark mode style
{
root: {
//your style
},
};
};
App.js
const App = () => {
//Add state mode here
const [mode, setMode] = useState("light")
const theme = createTheme(getTheme(mode));
return <ThemeProvider theme={theme}>...</ThemeProvider>;
}
Your component
import * as React from 'react';
import { makeStyles } from '#mui/styles';
import Button from '#mui/material/Button';
const useStyles = makeStyles((theme) => ({
root:theme.root,
}));
export default function Hook() {
const classes = useStyles();
return <Button className={classes.root}>Hook</Button>;
}
Another thing, I think makeStyles is legacy.
I solved this by using the Dynamic styling:
import Tabs from "#material-ui/core/Tabs";
import { styled } from "#material-ui/core/styles";
const CustomTabs = styled(Tabs)({
flexGrow: 1,
width: "100%",
backgroundColor: "var(--background-color)",
});
const darkModeVars = {
"--background-color": "#16213E",
};
const defaultModeVars = {
"--background-color": "#ffffff",
};
function TabsComponent(props) {
const [vars, setVars] = React.useState(
localStorage.darkMode == "true" ? darkModeVars : defaultModeVars
);
useEffect(() => {
manageDarkModeUpdateWhenUserTogglesIt();
}, []);
const manageDarkModeUpdateWhenUserTogglesIt = () => {
window.addEventListener("storage", () => {
if (localStorage.darkMode == "true") {
setVars(darkModeVars);
} else {
setVars(defaultModeVars);
}
});
};
return (
<div>
<AppBar position="static" color="default">
<CustomTabs style={vars}></CustomTabs>
</AppBar>
</div>
);
}
export default withRouter(TabsComponent);
I'm trying to add CSS in my app.js file but it iS not changing the colour of heading h1 Todo Manager
My app.js file:
import './App.css';
import Stylesheet from './MyComponents/Stylesheet';
const App = () => {
return (
<div className='App'>
<Stylesheet primary={true}/>
export default App;
myStyles.css file
.primary {
color: 'orange';
}
.font-xl {
font-size: 72px;
}
Stylesheet.js file:
import React from 'react'
import "./myStyles.css"
function Stylesheet(props) {
let className = props.primary ? 'primary' : ''
return (
<div>
<h1 className={ `${className} font-xl` }>Todo Manager</h1><br /><br /><br />
</div>
)
}
export default Stylesheet
Change the color property from 'orange' to orange, remove the quotation marks.
I am working on a project using React.js and I want to change the color of the dates for instance, now the color is black but I want purple. How can I do to to that ?
my datepicker
Here is my code :
https://codesandbox.io/s/react-datepicker-forked-h6wre?file=/src/index.js
import React, { useState } from "react";
import ReactDOM from "react-dom";
import { DatePicker, RangeDatePicker, TimePicker } from "#y0c/react-datepicker";
const Panel = ({ header, children }) => (
<div style={{ height: "300px" }}>
<h1>{header}</h1>
<div>{children}</div>
</div>
);
function App() {
const [startDate, setStartDate] = useState(new Date());
return (
<DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Thank you very much !
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
import React from "react";
import ReactDOM from "react-dom";
let customStyle = {
color: "red",
fontSize: "20px",
border: "1px solid black"
};
var colorChange = function () {
customStyle.color = "blue";
customStyle.fontSize = "30px";
customStyle.border = "1px solid black";
ReactDOM.render(
<div>
<h1 style={customStyle}>Hello World!</h1>
<button onClick={colorChange}> Click Me </button>
</div>,
document.getElementById("root")
);
};
ReactDOM.render(
<div>
<h1 style={customStyle}>Hello World!</h1>
<button onClick={colorChange}> Click Me </button>
</div>,
document.getElementById("root")
);
I want the text to change color on clicking the button. But unable to do so. I console logged the object customStyle inside the function colorChange, but it wouldn't change value to the properties. Any help will be appreciated
You can do this easily like the following. Check out this example
// App.js
import React, { useState } from "react";
export default function App() {
const [styles, setStyles] = useState({
color: "red",
fontSize: "20px",
border: "1px solid black"
})
const colorChange = () => {
setStyles({
color: "blue",
fontSize: "30px",
border: "1px solid black"
})
}
return (
<div>
<h1 style={styles}>Hello World!</h1>
<button onClick={colorChange}> Click Me </button>
</div>
)
}
// main.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));
Make a Component and render into ReactDOM.render(). Your code needs lots of modifications to follow component approach and state based approach. Here is what your can try this in your index.js file in the project created by npx create-react-app
import React, { useState } from "react";
import ReactDOM from "react-dom";
let customStyle = {
color: "red",
fontSize: "20px",
border: "1px solid black",
};
/*--- Here I am creating my Test component --- */
const Test = () => {
const [myStyles, setMyStyles] = useState(customStyle);
/* --- Handler --- */
const colorChange = () => {
setMyStyles({
...myStyles,
color: "blue",
fontSize: "30px",
});
};
return (
<div>
<h1 style={myStyles}>Hello World!</h1>
<button onClick={colorChange}> Click Me </button>
</div>
);
};
/* --- Component code ended ---*/
ReactDOM.render(
<React.StrictMode>
<Test />
</React.StrictMode>,
document.getElementById("root")
);
strange code for me. But i'll try to help. I think this is what you want.
your approach is very incorrect I think. Try this one. or you can use another approach like the way of #Imran Rafiq Rather
import React from "react";
import ReactDOM from "react-dom";
const App = () => {
const [change, setChange] = React.useState(false);
const handleChange = () => {
setChange((prevState) => !prevState);
};
const Style = {
color: !change ? "red" : "blue",
fontSize: "20px",
border: "1px solid black"
};
return (
<div>
<h1 style={Style}>Hello World!</h1>
<button onClick={handleChange}> Click Me </button>
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
rootElement
);
I want text entry to be highlighted with different colors depending on the character entered.
My hunch is that it is possible to do this by adding <span> elements with the appropriate styling inside of a contenteditable div.
Is there a better way?
Hi Please check this example. I used material-ui
import React, {useState} from 'react';
import Box from '#material-ui/core/Box';
import TextField from "#material-ui/core/TextField";
export default function BackgroundColor() {
const [text, setText] = useState('');
const [color, setColor] = useState('');
function changeHandler(event) {
setText(event.target.value);
if(event.target.value.toLowerCase() === 'a'){
setColor("primary.main");
}
else if(event.target.value.toLowerCase() === 'b'){
setColor("secondary.main");
}
else if(event.target.value.toLowerCase() === 'c'){
setColor("error.main");
}
else{
setColor("info.main");
}
}
return (
<div>
<TextField id="standard-basic" label="Standard" helperText="Type A or B or C" onChange={changeHandler} />
<Box color={color}>
{text}
</Box>
</div>
);
}
Depending on the complexity, you can also consider using Ace Editor
import React, { useState } from "react";
import AceEditor from "react-ace-builds";
import "./yamlHighlightRules";
import "ace-builds/src-noconflict/theme-github";
import "ace-builds/src-noconflict/ace";
import "./styles.css";
export default function App() {
const [text, setText] = useState("This is the most amazing initial text.");
const handleChange = input => {
setText(input);
};
return (
<div className="App">
<AceEditor
mode="yaml"
theme="github"
name="editor"
fontSize={15}
showPrintMargin={true}
showGutter={false}
highlightActiveLine={false}
value={text}
onChange={handleChange}
setOptions={{
showLineNumbers: true,
tabSize: 2,
readOnly: false
}}
height={"600px"}
width={"100%"}
/>
</div>
);
}
And then I edited an existing set of yaml highlighting rules, it's easier not starting from scratch.
import ace from "ace-builds/src-min-noconflict/ace";
import "ace-builds/src-noconflict/mode-text";
ace.define("ace/mode/yaml_highlight_rules", [], function(require, exports) {
const oop = require("../lib/oop");
const TextHighlightRules = require("./text_highlight_rules")
.TextHighlightRules;
const YamlHighlightRules = function() {
this.$rules = {
start: [
{
token: "highlight",
regex: /amazing/
}
]
};
this.normalizeRules();
};
oop.inherits(YamlHighlightRules, TextHighlightRules);
exports.YamlHighlightRules = YamlHighlightRules;
});
The token is your css class. Just add the prefix ace_ to it. Then you define a regular expression to determine what gets that class.
.ace_highlight {
background-color: yellow;
}
Here is a codesandbox where you can see it working.
And here are the docs on defining your own modes.