I want to change the width of the tooltip, but I can't.
How do I do this?
import React, { FunctionComponent } from 'react';
import {Tooltip} from "antd";
import 'antd/dist/antd.css';
export interface Props {
tooltipeText: string
}
const hintWithTooltipeStyle = {
position: 'relative' as 'relative',
left: 5,
top: 1
};
const HintWithTooltipe: FunctionComponent<Props> = ({
tooltipeText
}: Props) => {
return (
<span style={hintWithTooltipeStyle}>
<Tooltip placement="rightTop" title={tooltipeText} style={{width: 700, maxWidth: '500px !important'}}>
<Button>Ant design</Button>
</Tooltip>
</span>
);
};
export default HintWithTooltipe;
Inline styles don't work.
No styles work at all
You can do it like this without css class:
<Tooltip placement="rightTop" title={tooltipeText} overlayStyle={{maxWidth: '500px'}}>
<Button>Ant design</Button>
</Tooltip>
The antd Tooltip can be adapted by overriding values in css class .ant-tooltip-inner.
.ant-tooltip-inner {
color: yellow;
background-color: green;
width: 200px;
}
Here is a working CodeSandBox have a look at the index.css file for changes.
Or you could access overlayInnerStyle property from Tooltip.
<Tooltip overlayInnerStyle={{width: '250px'}} title={`tootltip text`}>
Info Text
</Tooltip>
You should use min-width for changing inside border
overlayStyle={{ maxWidth: '260px' }}
Related
I am trying to have custom width for antd tooltip component: Link to docs
How can this be done ?
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { Tooltip } from "antd";
import styled from "styled-components";
const Styled = styled.div`
.ant-tooltip-inner {
color: yellow;
background-color: green;
width: 800px;
}
`;
ReactDOM.render(
<Styled>
<Tooltip title="prompt text">
<span>Tooltip will show on mouse enter.</span>
</Tooltip>
</Styled>,
document.getElementById("container")
);
The antd Tooltips docs gives you a hint for your issue. The Tooltip is added as div in the body by default, in fact your custom style won't work without any adaptions. Depending on your requirements you can use
GlobalStyle from Styled Components
Overwrite getPopupContainer from Antd Tooltip
GlobalStyle
As one workaround you can use the globalStyle
const GlobalStyle = createGlobalStyle`
body {
.ant-tooltip-inner {
color: yellow;
background-color: green;
width: 800px;
}
}
`;
ReactDOM.render(
<Tooltip title="prompt text">
<GlobalStyle />
<span>Tooltip will show on mouse enter.</span>
</Tooltip>,
document.getElementById("container")
);
Here is a CodeSandbox for this workaround.
getPopupContainer
From the Tooltip docs for getPopupContainer
The DOM container of the tip, the default behavior is to create a div
element in body
Here you can just pass the triggerNode to be the parent object and your styles are set as expected.
const Styled = styled.div`
.ant-tooltip-inner {
color: yellow;
background-color: green;
width: 800px;
}
`;
ReactDOM.render(
<Styled>
<Tooltip title="prompt text" getPopupContainer={(triggerNode) => triggerNode}>
<span>Tooltip will show on mouse enter.</span>
</Tooltip>
</Styled>,
document.getElementById("container")
);
Working CodeSandBox for using getPopupContainer.
The default behavior for DOM container of the tip is to create a div element in body. You can change it to create inside Tooltip element with getPopupContainer:
<Tooltip
getPopupContainer={(trigger) => {
console.log(trigger);
return trigger;
}}
title="prompt text"
>
With the code above you style .ant-tooltip-inner will work.
For more info, check this link -> Tooltip Antd API
How do you align buttons on the right using Material-UI's makeStyles function?
I have tried using CSS's margin-right: 0 tag, but there is an error using '-' with makeStyles.
I renamed it as 'marginRight' and it still does not work. Also mr: 0 is not valid either. (Using Material-UI's spacing).
The code is trying to make the UI similar to stackOverflow's title layout.
import React from 'react';
import { makeStyles } from "#material-ui/core/styles";
import { Box, Button } from "#material-ui/core";
const style = makeStyles({
titleItemRight: {
color: 'white',
backgroundColor: 'blue',
top: '50%',
height: 30,
align: 'right',
position: 'relative',
transform: 'translateY(-50%)',
}
});
const App = () => {
const classes = style();
return (
<div>
<Box className={classes.titleBar}>
<Button variant='text' className={classes.titleItemRight}>Sign In</Button>
</Box>
</div>
);
};
Change,
align: 'right'
To,
float: 'right'
So the code would look like,
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import { Box, Button } from "#material-ui/core";
const style = makeStyles({
titleItemRight: {
color: "white",
backgroundColor: "blue",
top: "50%",
height: 30,
float: "right",
position: "relative",
transform: "translateY(-50%)"
}
});
const App = () => {
const classes = style();
return (
<div>
<Box className={classes.titleBar}>
<Button variant="text" className={classes.titleItemRight}>
Sign In
</Button>
</Box>
</div>
);
};
Working Codesandbox
I'd suggest using a flexbox for this or just using the AppBar provided already by material ui
https://material-ui.com/components/app-bar/#app-bar
if you'd still like to use Box, just edit the titleBar styles this way and add a spacer element to seperate elements to far right or far left
const style = makeStyles({
titleBar: {
display: 'flex',
width:'100%',
flexFlow: 'row',
},
spacer: {
flex: '1 1 auto'
}
});
and then your component
<Box className={classes.titleBar}>
<LogoHere/>
<div className={classes.spacer}/>
<Button variant="text">
Sign In
</Button>
</Box>
I want to style two buttons: Up and Down with an image using emotion css but unable to do so. Currently, I am normally styling my elements within a function. How can I achieve this using emotion css?
I followed https://emotion.sh/docs/introduction but I am unable to implement it the right way.
import up from "../img/up.png";
function PostButton(props) {
let style = {
backgroundRepeat: 'no-repeat',
background: `url(${up})`,
paddingRight: 24,
paddingTop: 26,
paddingLeft: 26,
paddingBottom: 26.6
};
return (
<button style={style} onClick={() => props.handleClick()}>{props.background}</button>
);
}
//I have written similar code for PostButton2
function Post(props) {
return (
<div>
<Up >
<PostButton src={"../images/up.png"} handleClick= .
{props.incrementScore} />
</Up> >
<Down >
<PostButton2 src={"../images/down.png"}
handleClick{props.decrementScore} />
</Down>
</Col>
</Row>
</Container>
</div>
);
}
Assuming that src property holds the background image, I think you need to update background to use the prop like so:
background: `url(${props.src})`,
Use src prop as path to image.
// First way, with css from emotion/react
/** #jsx jsx */
import { jsx, css } from '#emotion/react'
const PostButton = ({ background, handleClick, src }) => (
<button css={css`
background: ${`no-repeat url(${src})`};
padding: 26px 24px 26.6px 26px;
`}
onClick={handleClick}>{background}</button>
)
// Second way, with css from emotion/css
import React from 'react'
import { css } from '#emotion/css'
const PostButton = ({ background, handleClick, src }) => (
<button className={css`
background: ${`no-repeat url(${src})`};
padding: 26px 24px 26.6px 26px;
`}
onClick={handleClick}>{background}</button>
)
// Third way, with css from emotion/css, but pass styles as object
import React from 'react'
import { css } from '#emotion/css'
const PostButton = ({ background, handleClick, src }) => (
<button className={css({
background: `no-repeat url(${src})`,
padding: '26px 24px 26.6px 26px'
})}
onClick={handleClick}>{background}</button>
)
I was looking up how to change it but none of the solutions seemed to work for me.
I want to override the color of a react-bootstrap button.
This solution as below works just fine and is exactly what i wanna do:
<Button
block
style={{backgroundColor: '#0B0C10', borderColor: '#45A293', color: '#45A293', borderRadius: '100px'}}
>
sample text
</Button>
But i don't wanna rewrite it each time i use button so i would like to have solution with css, I've tried using this:
.custom-button {
background-color: #1F2833;
border-color: #45A293;
border: 3px solid-transparent;
color: #45A293;
border-radius: 100px;
}
And then passing it in className like like so className="custom-button" but it doesn't really work.
I am using Button from react-bootstrap
import {Button} from "react-bootstrap";
Styles from bootstrap
import 'bootstrap/dist/css/bootstrap.min.css';
Using versions as below:
"react-bootstrap": "^1.0.0-beta.5",
"bootstrap": "^4.3.1",
Styles applied using the style="" attribute of HTML elements are more specific than styles applied through classes, which is why your first solution worked. Appending !important at the end of styles is one way of overriding other styles which are more specific than .custom-button class.
One quick solution that comes to my mind, that will ensure that you don't repeat yourself, is storing the styles in an object and importing them from a file.
styles.js
const styles = {
customButton: {
backgroundColor: '#0B0C10',
borderColor: '#45A293',
color: '#45A293',
borderRadius: '100px'
}
};
export default styles;
Component.jsx
import { styles } from './styles.js'
<Button
block
style={styles.customButton}
>
sample text
</Button>
Otherwise you would have to play with attaching ID's or construct more specific css selectors.
Add a bg or btn
.bg-custom-button {
background-color: #1F2833;
border-color: #45A293;
border: 3px solid-transparent;
color: #45A293;
border-radius: 100px;
}
Got mine working like that
Then in the bg="custom-button"
I am unsure if this effect is intended or not but the easiest way that I have found to override React Bootstrap css is to use Material ui withStyles. Here is an example.
import React from 'react';
import { withStyles } from '#material-ui/styles';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Button from 'react-bootstrap/Button';
const styles = {
logoContainer: {
position: 'fixed',
},
rowStyles: {
marginBottom: '10px',
},
button: {
border: '3px inset #ffc107',
borderRadius: '50%',
width: '55px',
height: '55px',
fontFamily: 'fangsong',
fontSize: '1em',
fontWeight: '700',
color: 'white',
backgroundColor: 'rgb(0,0,0, 0.5)',
}
}
const Logo = (props) => {
const logoStyles = props.classes;
return (
<div>
<Container container='true' className={logoStyles.logoContainer}>
<ButtonGroup >
<Col>
<Row className={logoStyles.rowStyles}>
<Button onClick={{}} className={logoStyles.button}>BS</Button>
</Row>
</Col>
</ButtonGroup>
</Container>
</div>
);
}
export default withStyles(styles)(Logo);
Hope this helps...
You can use the "bsPrefix" prop which allows to override the underlying component CSS base class name.
bsPrefix="custom-button"
index.js
import React from 'react'
import TextField from '#material-ui/core/TextField'
import style from './style'
import withStyles from 'hoc/withStyles'
import { connect } from 'react-redux'
class SearchField extends React.Component {
constructor (props) {
super(props)
this.onChange = this.onChange.bind(this)
}
onChange (event) {
const { dispatcher } = this.props
this.props.dispatch(dispatcher(event.target.value))
event.preventDefault()
}
render () {
const { classes, placeholder } = this.props
return (
<TextField
label={placeholder}
placeholder={placeholder}
InputProps={{ classes: { input: classes.resize } }}
className={classes.textField}
margin="normal"
autoFocus={true}
variant="outlined"
onChange={this.onChange}
/>
)
}
}
export default withStyles(style)(connect()(SearchField))
style.js
export default function () {
return {
container: {
display: 'flex',
flexWrap: 'wrap'
},
textField: {
width: 'auto'
},
resize: {
fontSize: 11
}
}
}
https://material-ui.com/api/text-field/
How can I change TextField height? I can't find it in the documentation. When I try to change it directly in CSS it works incorrectly (it looks like this - selected height on the screen 26px).
What should I do?
You can try out adding the size="small" which is mentioned in the Textfield API
<TextField variant="outlined" size="small" / >
The other answer is useful but didn't work for me because if a label is used in an outlined component (as it is in the question) it leaves the label uncentered. If this is your usecase, read on.
The way the <label> component is styled is somewhat idiosyncratic, using position: absolute and transform. I believe it's done this way to make the animation work when you focus the field.
The following worked for me, with the latest material-ui v4 (it should work fine with v3 too).
// height of the TextField
const height = 44
// magic number which must be set appropriately for height
const labelOffset = -6
// get this from your form library, for instance in
// react-final-form it's fieldProps.meta.active
// or provide it yourself - see notes below
const focused = ???
---
<TextField
label="Example"
variant="outlined"
/* styles the wrapper */
style={{ height }}
/* styles the label component */
InputLabelProps={{
style: {
height,
...(!focused && { top: `${labelOffset}px` }),
},
}}
/* styles the input component */
inputProps={{
style: {
height,
padding: '0 14px',
},
}}
/>
Notes
I just used inline styles rather than the withStyles HOC, as this approach just seems simpler to me
The focused variable is required for this solution - you get this with final-form, formik and probably other form libraries. If you're just using a raw TextField, or another form library that doesn't support this, you'll have to hook this up yourself.
The solution relies on a magic number labelOffset to center the label which is coupled to the static height you choose. If you want to edit height, you'll also have to edit labelOffset appropriately.
This solution does not support changing the label font size. You can change the input font size, only if you're fine with there being a mismatch between that and the label. The issue is that the size of the 'notch' that houses the label in the outlined border is calculated in javascript according to a magic number ratio that only works when the label font size is the default. If you set the label font size smaller, the notch will also be too small when the label shows in the border. There's no easy way to override this, short of repeating the entire calculation yourself and setting the width of the notch (the component is fieldset > legend) yourself via CSS. For me this wasn't worth it, as I'm fine with using the default font sizes with a height of 44px.
The component takes a multiline prop which is a boolean. Set this to true, and then set the component's rows prop to a number.
<TextField
multiline={true}
rows={3}
name="Description"
label="Description"
placeholder="Description"
autoComplete="off"
variant="outlined"
value={description}
onChange={e => setDescription(e.target.value)}
/>
You didn't show how you tried to specify the height, but the approach you used for font-size is the right approach.
Here's an example showing two text fields with different heights:
import React from "react";
import ReactDOM from "react-dom";
import TextField from "#material-ui/core/TextField";
import { withStyles } from "#material-ui/core/styles";
const styles = {
input1: {
height: 50
},
input2: {
height: 200,
fontSize: "3em"
}
};
function App(props) {
return (
<div className="App">
<TextField
variant="outlined"
InputProps={{ classes: { input: props.classes.input1 } }}
/>
<TextField
variant="outlined"
InputProps={{ classes: { input: props.classes.input2 } }}
/>
</div>
);
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);
And here is a code sandbox with the same code so you can see it running.
First of all, my heart goes out to any poor soul in this thread who has found themselves fighting against the awkward design of the MUI components. Second, if you're using themes AND the "filled" variant of TextField, this solution might work for you. Using the Chrome Dev Tools, I found success adjusting the height of the divs with the classes "MuiFormControl-root" and "MuiInputBase-root". This is what my code looks like (results may vary):
const theme = createMuiTheme({
overrides: {
MuiFormControl: {
root: {
height: '56px',
},
},
MuiInputBase: {
root: {
height: '56px',
},
},
},
})
<TextField
id="outlined-multiline-static"
label="Multiline"
multiline
fullWidth
defaultValue="Default Value"
inputProps={{
style: {
height: "600px",
},
}}
/>
To make it narrower, set a height, and add a "dense" margin prop on the TextField to keep the label aligned correctly:
<TextField margin="dense" style={{ height: 38 }} />
With material-ui v4+, you have to adjust the input padding and the label position to get what you whant.
<TextField label="Label" variant="outlined" />
Suppose we want the above TextField to be 48px height (it's default size is 56px), we just have to do (56px - 48px) / 2 = 4px and in our css file:
.MuiTextField-root input {
/* 14.5px = 18.5px - 4px (note: 18.5px is the input's default padding top and bottom) */
padding-top: 14.5px;
padding-bottom: 14.5px;
}
.MuiTextField-root label {
top: -4px;
}
.MuiTextField-root label[data-shrink='true'] {
top: 0;
}
For styled-components users, all the above block of code can be defined as Sass mixins that can be re-used throughout the code base
import { css } from 'styled-components'
const muiTextFieldHeight = (height: number) => {
const offset = (56 - height) / 2
return css`
input {
padding-top: calc(18.5px - ${offset}px);
padding-bottom: calc(18.5px - ${offset}px);
}
label {
top: -${offset}px;
}
label[data-shrink='true'] {
top: 0;
}
`
}
Then somewhere in your stylesheet
.MuiTextField-root {
${muiTextFieldHeight(40)} /* set TextField height to 40px */
}
This works with material-ui v3,
<div className="container">
<TextField
label="Full name"
margin="dense"
variant="outlined"
autoFocus
/>
</div>
.css
.container input {
height: 36px;
padding: 0px 14px;
}
.container label {
height: 36px;
top: -6px;
}
.container label[data-shrink="true"] {
top: 0;
}
https://codesandbox.io/s/elated-kilby-9s3ge
With React and "#mui/material": "^5.2.2",
import * as React from 'react';
import TextField from '#mui/material/TextField';
export default function BasicTextFields() {
return (
<TextField
label="Outlined"
variant="outlined"
InputLabelProps={{
style: {
fontSize: 14,
backgroundColor: '#FFF',
paddingLeft: 4,
paddingRight: 4,
color: '#383838',
},
}}
inputProps={{
style: {
fontSize: 14,
height: 40,
width: 272,
padding: '0 14px',
fontWeight: 'bold'
},
}}
/>
);
}
CSS
.MuiTextField-root{
border: 1px solid $BORDER_COLOR_2;
border-radius: 6px;
height: 40px;
box-shadow: 0px 2px 3px $BOX_SHADOW_1;
color: $TEXT_COLOR_3;
font-size: 14px;
font-weight: bold;
}
.MuiTextField-root label {
top: -6px;
}
.MuiTextField-root label[data-shrink='true'] {
top: 0;
}
Changing the height is simple, can be achieved using
InputProps={{style: { fontSize: '1.8rem', height: 70 },
But that isn't enough, because the label(placeholder in this case) will not be centered.
Label can be centered using:
sx={{'.MuiFormLabel-root[data-shrink=false]': { top: <put desired value here>} }}