[core] Remove private style sheet names
See original GitHub issueOutlinedInput is not working as expected on prod after build with styled components.
- The issue is present in the latest release.
- I have searched the issues of this repository and believe that this is not a duplicate.
Current Behavior 😯
Fieldset getting squeezed in production. https://youtu.be/HpLK2PLnqqc
Expected Behavior 🤔
Working fine in dev https://youtu.be/Dv93zt6w41A
Steps to Reproduce 🕹
I have created code sandbox but I am facing this issue on build https://codesandbox.io/s/agitated-lederberg-f0v0d
import { useState, useRef } from 'react';
import styled from 'styled-components';
import OutlinedInput from '@material-ui/core/OutlinedInput';
import InputAdornment from '@material-ui/core/InputAdornment';
import { Search, Close } from '../../components/Icons';
const SearchTextField = styled(OutlinedInput)`
&.MuiInputBase-root {
float: right;
width: ${({ value }) => (value ? '100%' : '120px')};
justify-content: flex-end;
transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
height: 48px;
cursor: pointer;
&.Mui-focused {
width: 100%;
}
}
&.MuiOutlinedInput-root .MuiInputBase-input {
::placeholder {
color: #3c4852;
opacity: 1;
font-weight: 600;
font-size: 14px;
line-height: 150%;
}
cursor: pointer;
color: #3c4852;
font-weight: 600;
font-size: 14px;
line-height: 150%;
padding-left: 8px;
}
&.Mui-focused .MuiInputBase-input {
width: 100%;
::placeholder {
color: #808080;
}
}
&.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {
border-color: ${({ value }) => (value ? '#f0f4f7' : '#fff')};
}
&:hover.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {
border-color: ${({ value }) => (value ? '#f0f4f7' : '#fff')};
}
&.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
border-color: #f0f4f7;
border-width: 1px;
border-radius: 8px;
}
`;
const MainWrapper = styled.div`
grid-column: 11/19;
align-self: center;
`;
const SearchIcon = ({ onClick }) => (
<InputAdornment position="start">
<Search onClick={onClick} size="24px" />
</InputAdornment>
);
const CloseIcon = ({ onClick }) => (
<InputAdornment position="end">
<Close size="24px" onClick={onClick} />
</InputAdornment>
);
const SearchTab = () => {
const inputRef = useRef();
const [searchText, setsearchText] = useState('');
const handleChange = event => setsearchText(event.target.value);
const handleClick = () => {
setsearchText('');
inputRef.current.focus();
};
return (
<MainWrapper>
<SearchTextField
placeholder="Search"
startAdornment={<SearchIcon onClick={handleClick} />}
fullWidth={!!searchText}
onChange={handleChange}
value={searchText}
endAdornment={!!searchText && <CloseIcon onClick={handleClick} />}
inputRef={inputRef}
/>
</MainWrapper>
);
};
export default SearchTab;
Context 🔦
I found that PrivateNotchedOutline-root-43
this class properties are not there in style. Somehow after build these properties are getting removed while on dev its getting added perfectly.
.PrivateNotchedOutline-root-43 {
top: -5px;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
position: absolute;
transition: padding-left 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,border-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,border-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
border-style: solid;
border-width: 1px;
border-radius: inherit;
pointer-events: none;
If I add externally from browser it works fine.
Your Environment 🌎
Tech | Version |
---|---|
Material-UI | v4.8.3 |
Styled Components | v5.0.0 |
React | v16.12.0 |
Browser | Chrome and Safari |
TypeScript | No |
Next js | v9.1.7 |
Issue Analytics
- State:
- Created 4 years ago
- Comments:14 (11 by maintainers)
Top Results From Across the Web
[core] Remove private style sheet names #19240 - GitHub
OutlinedInput is not working as expected on prod after build with styled components. The issue is present in the latest release.
Read more >Reset/remove CSS styles for element only - Stack Overflow
You need "A css rule available that would remove any styles previously set in the stylesheet for a particular element." So, if the...
Read more >ASP.NET Core Blazor CSS isolation - Microsoft Learn
Isolate CSS styles to individual pages, views, and components to reduce or avoid: Dependencies on global styles that can be challenging to ...
Read more >Excel Core Skill Review 3 Flashcards - Quizlet
Remove all comments, annotations, personal information and document properties in ... In the Home tab, Styles group, click the drop down for Cell...
Read more >Class Spreadsheet | Apps Script - Google Developers
Returns the list of active ranges in the active sheet or null if there are no active ranges. getActiveSheet(), Sheet, Gets the active...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Can I start working on a PR for this?
sounds reasonable!