Повторное использование CSS в JS

Question

Я впервые использую Material UI и начинаю много повторять CSS. Я привык к глобальной таблице стилей и повторному использованию классов из этого, но я не уверен, как это сделать с помощью этого фреймворка.

Я прочитал документы, и единственное, что я могу понять в моей ситуации, - это создать createMuiTheme и использовать его следующим образом:

index.js

const theme = createMuiTheme({
  fontFamily: {
    primary: "\"IM Fell DW Pica SC\", serif",
})

ReactDOM.render( 
<MuiThemeProvider theme={theme}>
 <CssBaseline />
 <App />
</MuiThemeProvider>,
document.getElementById('app')
)

app.js

const styles = theme => ({
  paragraph: {
   "fontFamily": theme.fontFamily.primary
  }
})

\\ DOM

<Typography variant="caption" gutterBottom className={paragraph}>
  Here is my paragraph text
</Typography>

Я даже правильно использую это? Для меня это не сильно сокращает объем кода, потому что, если я создаю другой компонент, который хочет использовать то же семейство шрифтов, мне придется снова создать класс paragraph.

У меня есть несколько компонентов в отдельных файлах, и я использую много простых стилей, таких как textAlign: 'center' и fontWeight: 'bold'

Я думал о создании отдельного файла JS для CSS и извлечении из него, но я не уверен, что именно для этого был разработан Material UI. Я думаю, что я не использую createMuiTheme в полной мере. Кто-нибудь может дать мне простое решение для повторного использования некоторых из этих стилей CSS?

Answer 1

Вы должны перекомпилировать компонент, и тогда он будет применен ко всем компонентам в оболочке Theme, я сделал это так:

import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';

const THEME = createMuiTheme({
  typography: {
    "fontFamily": "\"IM Fell DW Pica SC\", serif",
    "fontSize": 20,
    "lineHeight": 1.5,
    "letterSpacing": 0.32,
    useNextVariants: true,
    suppressDeprecationWarnings: true,
  },
});

class App extends Component {
  render() {
    return (
      <MuiThemeProvider theme={THEME}>
        </YourComponentsThatHasThisFont>
      </MuiThemeProvider>
    );
  }
}

export default App;

В этом случае я изменил компонент типографика form-material-ui, поэтому весь текст, который написан с использованием их тега, будет в этом новом стиле шрифта.

Если вы хотите изменить настройку вашей темы, вот пример HOC, который вы можете сделать.

// imports

const styles = theme => ({
  text: {
    "&.override1": {
      fontSize: 15
    },
    "&.override2": {
      fontSize: 53,
      fontWeight: 700
    }
  }
});

const Text = ({ classes, children, override, ...rest }) => (
  <Typography
    classes={{ root: classes.text }}
    className={`${override}`}
    {...rest}
  >
    {children}
  </Typography>
);

export default withStyles(styles)(Text);

И вы бы просто использовали этот компонент так же, как обычный Typography компонент, за исключением того, что вы могли бы также передавать такие вещи, как <Text variant="h2" override="override1">Hello World</Text>