No type information for styles inside `[theme.breakpoints.down()]` object
Open
@mnajdova is already working on this.
Since Sep 20, 2022.
scope: all components
type: expected behavior
typescript
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Steps to reproduce 🕹
Steps:
- Write the following styled button:
export const StyledButton = styled('button')(({ theme }) => ({
width: '100%',
[theme.breakpoints.down('md')]: {
}
}));
- Start writing
width: 50%inside the[theme.breakpoints.down('md')]styles. Notice how there are no CSS completions such as the ones provided outside that object.
Current behavior 😯
No CSS completions inside [theme.breakpoints.down('XX')] objects.
Expected behavior 🤔
CSS completions are always displayed when using styled.
Context 🔦
No response
Your environment 🌎
npx @mui/envinfo
Browser used: Chrome
System:
OS: macOS 12.6
Binaries:
Node: 16.17.0 - /private/var/folders/kq/jlq8006j7tg9d32d8frd8w800000gn/T/xfs-69364989/node
Yarn: 3.2.3 - /private/var/folders/kq/jlq8006j7tg9d32d8frd8w800000gn/T/xfs-69364989/yarn
npm: 8.15.0 - ~/.nvm/versions/node/v16.17.0/bin/npm
Browsers:
Chrome: 105.0.5195.125
Edge: Not Found
Firefox: Not Found
Safari: 16.0
tsconfig.json file
{
"include": [
"next-env.d.ts",
"next.config.mjs",
"**/*.ts",
"**/*.tsx"
],
"exclude": [
"node_modules"
],
"compilerOptions": {
// Type checking
"allowUnreachableCode": false,
"allowUnusedLabels": false,
"noFallthroughCasesInSwitch": true,
"noImplicitAny": true,
"noImplicitOverride": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noPropertyAccessFromIndexSignature": true,
"noUncheckedIndexedAccess": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"strict": true,
// Modules
"module": "esnext",
"moduleResolution": "nodenext",
"resolveJsonModule": true,
// Emit
"importHelpers": true,
"importsNotUsedAsValues": "error",
"removeComments": true,
"sourceMap": true,
"noEmit": true,
// JS support
"allowJs": true,
"checkJs": true,
// Interop constraints
"esModuleInterop": true,
"isolatedModules": true,
"forceConsistentCasingInFileNames": true,
// Language and environment
"target": "ESNext",
"jsx": "preserve",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
// Projects
"incremental": true,
// Completeness
"skipLibCheck": true
}
}
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.